我知道這是一個非常基本的問題，即使是初學者也能做到這一點。但不知何故，我遇到了這樣的錯誤：
index.js:1 警告。串列中的每個孩子都應該有一個唯一的 "key" 托詞。
檢查FilterProducts的渲染方法。
下面是我的代碼
const filterList = filterBy.map((f, i) => /span> {
const key = Object.keys（f）。
return (
< div key={i} className=>
<h4 className="filter__header"/span>> {key}</h4>
{f[key].map((val) => {
回傳(
<CheckBoxInput
changeVal={(e) => changeValHandler(e, key)}。
value={val.toLowerCase()}。
label={val}
/>
);
})}
</div>
);
});
我正在渲染2個串列，我為第一個串列提供了鍵，至于第二個，我不知道如何傳遞鍵。這是一個組件，如果我把鍵傳給該組件，它抱怨說鍵不能作為一個道具傳遞。 請給我一些幫助
。uj5u.com熱心網友回復：
我相信你的代碼在這一行是不正確的：
{f[key].map((val) => //span> {
你已經在這里檢索了f的鍵：
const key = Object.keys（f）。
所以你的代碼實際上應該是：
const filterList = filterBy.map((f, i) => /span> {
const keys = Object.keys（f）。
return (
< div key={i} className=>
<h4 className="filter__header"/span>> {keys}</h4>
{keys.map((val) => {
回傳(
<CheckBoxInput
key={val} // then 就 使用 the f property key as the key (if unique)
changeVal={(e)=>changeValHandler(e, key)}。
value={val.toLowerCase()}。
label={val}
/>
);
})}
</div>
);
});
然后只需使用f屬性鍵作為組件的第二個回圈的鍵（如果是唯一的）。
也不確定你想在這一行顯示什么
<h4 className="filter__header"> {keys}</h4>
但是按照目前的代碼寫法，這將顯示一個鍵的陣列。
uj5u.com熱心網友回復：
你實際上做得很好。但是你的代碼中有兩個回圈，每個回圈都需要給回圈的元素標記一個key道具。只要這個鍵對該回圈來說是唯一的，就可以了。
<CheckBoxInput key={...}。/>
uj5u.com熱心網友回復：
像這樣傳遞：
{f[key].map((val,i) => //span> {
return (
<div key={i}>
<CheckBoxInput。
changeVal={(e) => changeValHandler(e, key)}。
value={val.toLowerCase()}。
label={val}
/>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/334274.html
標籤：
下一篇：回圈與獲取-React