使用带有 React Hook Form 的 useFieldArray 时动态添加错误

Question

您将如何动态地将自定义错误消息添加到使用 useFieldArray 生成的输入中？

这里是非常简单的codesandbox - https://codesandbox.io/s/romantic-dubinsky-xd6f7?file=/src/App.js

通常我会写类似 {errors.name && <p>This can't be empty</p>} 的东西，但是使用 useFieldArray 输入的名称是动态生成的。我试过 {errors.items.index.name && <p>This can't be empty</p>} 之类的方法，但没有用。

有什么建议吗？

Answer 1

你非常接近，但你需要使用括号语法（以及可选的链接来检查路径是否为 available/valid）：

{errors.items?.[index]?.name && <p>This can't be empty</p>}