如何使用反应钩子形式验证数组？

Question

我正在根据 selectedAddress 中可用的字段呈现表单。 key 变量都是唯一的，但我看到了 each child in a list must have a unique key error，并且验证无效。我错过了什么？

import { useForm } from "react-hook-form";

const {
  register,
  handleSubmit,
  formState: { errors },
  } = useForm();

const RenderSelectedAddress = () => {
if (selectedAddress && !editAutocompletedForm) {

  const entries = Object.entries(selectedAddress);

  const formEntries = entries.map(([key, value]) => (
    <>
      <label htmlFor={key}>{key}</label>
      <input
        defaultValue={value}
        type="text"
        placeholder="Placeholder"
        id={key}
        {...register( key , { required: "required" })}
      ></input>
      {errors.key && <p>{errors.key.message}</p>}
    </>
  ));

  return formEntries;

}

return null;

};

Answer 1

每次做地图的时候，都需要给渲染的内容赋予一个具有唯一值的关键属性。在这种情况下，您应该使用 div 而不是 React.Fragment 并给它一个键...

const formEntries = entries.map(([key, value]) => (
    <div key={value}>
      <label htmlFor={key}>{key}</label>
      <input
        defaultValue={value}
        type="text"
        placeholder="Placeholder"
        id={key}
        {...register( key , { required: "required" })}
      ></input>
      {errors.key && <p>{errors.key.message}</p>}
    </div>
  ));

这不是强制性的，你会收到那些警告，但 React 优化渲染非常重要。另外，key的值应该是一个字符串，而不是一个对象。

请阅读与此主题相关的文档： https://reactjs.org/docs/lists-and-keys.html

Answer 2

key 道具应该在呈现列表的第一个 child 上。在您的情况下，您使用了 fragment 不接受 key 缩短形式的道具。而不是 <>...</> 使用：<React.Fragment key={key}></React.Fragment>.
验证错误，我认为是你访问错误导致的。使用 errors[key].
而不是 errors.key

如何使用反应钩子形式验证数组？

How to validate an array with react hook form?

javascript

arrays

reactjs

react-hooks

react-hook-form