如何使用React Hook Form验证数组？解决列表key报错及校验失效问题

问题1：列表唯一key报错原因及修复 #

你在map遍历返回的根节点用了无属性的短语法Fragment <></>，该语法不支持绑定key属性，React要求遍历生成的每一项根节点必须显式绑定唯一key，修复方案：

// 把短语法Fragment换成可传key的完整Fragment写法
const formEntries = entries.map(([key, value]) => (
  <React.Fragment key={key}>
    <label htmlFor={key}>{key}</label>
    <input
      defaultValue={value}
      type="text"
      placeholder="Placeholder"
      id={key}
      {...register( key , { required: "required" })}
    />
    {errors[key] && <p>{errors[key].message}</p>}
  </React.Fragment>
));
// 也可以在外层套div等标签绑定key，根据你的布局需求选择即可

问题2：React Hook Form校验规则不生效、错误不展示原因及修复 #

• 错误取值写法错误：你写的errors.key是读取errors对象下名为key的固定属性，不会读取你变量key对应的动态字段名，需要改成方括号取值errors[key]，才能正确匹配动态注册的字段错误
• 校验触发逻辑遗漏：useForm的校验仅会在handleSubmit包裹的提交函数执行时触发，如果你直接绑定提交事件到自定义函数不会触发校验，示例正确写法：

const onSubmit = (data) => console.log(data)
// 表单提交绑定
<form onSubmit={handleSubmit(onSubmit)}>
  {/* 表单内容 */}
</form>

• 校验时机配置可选：useForm默认仅在提交时触发校验，如果你需要输入时/失焦时实时校验，可以在初始化时配置触发时机：

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm({
  // onChange为输入时触发校验，onBlur为失焦时触发
  mode: "onChange"
});

• 动态初始值适配：如果你的selectedAddress是异步获取的，input的defaultValue可能不会同步更新到表单内部状态，建议在获取到selectedAddress后调用reset方法设置初始值：

useEffect(() => {
  if(selectedAddress) {
    reset(selectedAddress)
  }
}, [selectedAddress, reset])

内容的提问来源于stack exchange，提问作者shfury