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

Question

我正在根据selectedAddress中可用的字段呈现表单。 key变量都是唯一的，但我看到each child in a list must have a unique key error的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

每次制作地图时，您都需要将具有唯一值的关键属性归因于正在渲染的内容。 在这种情况下，你应该使用 divs 而不是 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

1. key prop 应该在渲染列表的第一个子节点上。 在您的情况下，您使用了一个不接受缩短形式的key道具的fragment 。 而不是<>...</>使用： <React.Fragment key={key}></React.Fragment> 。

2. 对于验证错误，我相信这是您错误地访问错误的事实。 使用errors[key]代替errors.key 。