我正在根據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;
};
uj5u.com熱心網友回復：
每次制作地圖時，您都需要將具有唯一值的關鍵屬性歸因于正在渲染的內容。在這種情況下，你應該使用 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
uj5u.com熱心網友回復：
keyprop 應該在渲染串列的第一個子節點上。在您的情況下，您使用了fragment不接受key縮寫形式的道具的a 。而不是<>...</>使用：<React.Fragment key={key}></React.Fragment>。對于驗證錯誤，我相信這是您錯誤地訪問錯誤的事實。而不是
errors.key，使用errors[key]。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/338317.html
標籤：javascript 数组 反应 反应钩子 反应钩形