我经常遇到这个错误
Warning: Each child in a list should have a unique "key" prop. Check the render method of `MyComponent`.
在 React 中,错误消息总是告诉你有问题的组件,但没有告诉你具体有问题的 HTML 标签 / 虚拟 DOM 元素。在一个大型代码库中工作时,有时会有很大的组件,这使得找到错误的源头非常困难。
是什么导致了这个错误?我正在寻找一个权威的列表。
- 在数组中缺少“ key”属性的标签(非常确定)
- 两个具有相同“ key”属性值的标签?(我认为对此有不同的错误消息)
连续书写的两个元素(例如 <div></div><div></div>
)被算作“列表中的子项”吗?它们也会引起错误吗?
有哪些有效的查找问题标签的策略?
- 逐个给组件中每个没有key的标签添加
key={Math.random()}
,直至错误消失,然后查看最后添加的那个标签。(可能耗时且有时无效) - 按时间顺序撤销更改,直到错误消失。(可能耗时)
- 这里还有更好的方法
我正在寻找全面而权威的答案。
map()
函数将一个数组转换成JSX元素。在这样做的过程中,我怀疑你没有传递key
属性给这些元素。你应该做一些像这样的事情:arr.map((element,key) => <div key={key}>{element}</div>)
。 - Yevhen Horbunkovmap()
生成的元素将具有唯一的key
值(因为map()
的第二个参数是数组中项目的索引)。理论上,Math.random()
有一定的机会产生两次或更多次相同的输出,因此我认为这不是一个好的实践方式。 - Yevhen Horbunkov