我有這個React代碼：
export default function Technologies({ technologies }) {
return (
<>
{ Object.keys(technologies).map((key, i) => (
<span>
<span className={styles.post}><h3 className={'bold300'}>{key}</h3></span>
<div className={styles.techList}>
<ul key={i}>
{ Object.keys(technologies[key]).map((key2, idx) => (
<li key={idx}>{key2}
{ technologies[key][key2].map(key3 => (
<span key={key3.name} className={styles.badge}><Image src={key3.name} width={key3.w} height={key3.h} /></span>
)) }
</li>
)) }
</ul>
</div>
</span>
)) }
</>
)
}
在這里您可以看到嵌套迭代，以及我使用i或idx為串列創建唯一鍵的任何地方，但仍然會收到此字串的警告：
...
<ul key={i}>
...
正如我所說，我知道這個錯誤意味著什么，甚至知道如何修復，但不是在這種情況下，我只是不知道我應該在哪里key防止這個警告。謝謝！
uj5u.com熱心網友回復：
key應該出現在根元素上。所以，第一個key應該是在span而不是在ul。
export default function Technologies({ technologies }) {
return (
<>
{Object.keys(technologies).map((key, i) => (
<span key={i}>
<span className={styles.post}>
<h3 className={"bold300"}>{key}</h3>
</span>
<div className={styles.techList}>
<ul>
{Object.keys(technologies[key]).map((key2, idx) => (
<li key={idx}>
{key2}
{technologies[key][key2].map((key3) => (
<span key={key3.name} className={styles.badge}>
<Image src={key3.name} width={key3.w} height={key3.h} />
</span>
))}
</li>
))}
</ul>
</div>
</span>
))}
</>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/485590.html
標籤：javascript 反应