Блог

Главная - Вопросы по программированию - Как проверить массив с помощью формы react hook?

Как проверить массив с помощью формы react hook?

#javascript #arrays #reactjs #react-hooks #react-hook-form

Вопрос:

Я создаю форму на основе того, какие поля доступны 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 amp;amp; !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 amp;amp; <p>{errors.key.message}</p>}
    </>
  ));

  return formEntries;

}

return null;

};

Ответ №1:

  1. key prop должен быть первым дочерним элементом отображаемого списка. В вашем случае вы использовали a fragment , который не принимает key prop в сокращенной форме. Вместо <>...</> использования: <React.Fragment key={key}></React.Fragment> .
  2. Что касается ошибки проверки, я полагаю, это тот факт, что вы неправильно обращаетесь к ошибкам. Вместо errors.key , используйте errors[key] .

Комментарии:

1. Спасибо за быстрый ответ, это все отсортировало .. Просто интересно, r.e # 2 Этот синтаксис работает в другой форме, которую я использую: {errors.email? <div>{errors.email.message}</div> : null} . Зачем нужны квадратные скобки при использовании массива?

2. Это потому, что здесь ваши значения являются динамическими, что означает, что доступ errors.key будет пытаться искать ключ с именем key внутри ошибок, в то время errors[key] как доступ к значению текущего ключа в цикле внутри errors

Ответ №2:

Каждый раз, когда вы выполняете map, вам нужно приписать ключевой атрибут с уникальным значением тому, что отображается. В этом случае вы должны использовать divs вместо React .Фрагментируйте и дайте ему ключ…

 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 amp;amp; <p>{errors.key.message}</p>}
    </div>
  ));

это не обязательно, и вы получаете эти предупреждения, но для React очень важно оптимизировать рендеринг. Кроме того, значение key должно быть строкой, а не объектом.

Пожалуйста, ознакомьтесь с документами, относящимися к этой теме: https://reactjs.org/docs/lists-and-keys.html

Метки: