#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:
key
prop должен быть первым дочерним элементом отображаемого списка. В вашем случае вы использовали afragment
, который не принимаетkey
prop в сокращенной форме. Вместо<>...</>
использования:<React.Fragment key={key}></React.Fragment>
.- Что касается ошибки проверки, я полагаю, это тот факт, что вы неправильно обращаетесь к ошибкам. Вместо
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