React 从我的 div 中删除了密钥，然后因此抛出错误

Question

我有一个反应函数组件，它只是 returns 这个：

<div name={id} key={id}>{id}</div>

我遇到的问题是，当我像这样使用这个组件时：

{Object.keys(data).map(key => (
    <MyComponent id={key} data={data[key]} />
))}

我收到错误 Warning: Each child in a list should have a unique "key" prop.，当我查看生成的 html 时，它没有密钥。

<div name="7987">7987</div>
<div name="21727">21727</div>
<div name="157119">157119</div>
<div name="232881">232881</div>

所以问题是为什么删除密钥并生成错误警告？

Answer 1

react 编译器需要

中的 key prop

<MyComponent id={key} data={data[key]} />

而不是

<div name={id} key={id}>{id}</div>

避免这种情况的一种方法是

<MyComponent id={key} data={data[key]} key={key} />

或者确保没有重复的键

{Object.keys(data).map((key, index) => (
<MyComponent id={key} data={data[key]} key={index} />
))}

Answer 2

按键在实际 dom 中未呈现。您收到该错误的原因是您没有将密钥传递给 MyComponent 所以它应该是这样的。

{Object.keys(data).map(key => (
    <MyComponent key={key} id={key} data={data[key]} />
))}

确保密钥没有重复。

您也可以像这样传递索引以避免任何重复。

{Object.keys(data).map((key, index)=> (
    <MyComponent key={index} id={key} data={data[key]} />
))}

React removes key from my div and then throws error because of that