【问题标题】:Using a index as a key in react. When it is affect and when it doesn't? [duplicate]在反应中使用索引作为键。什么时候有影响,什么时候没有? [复制]
【发布时间】:2021-05-09 13:08:15
【问题描述】:
我正在使用以下 sn-p 来提供索引作为键。
[{},{},{}].map((item,index) => <li key={index}/>)
【问题讨论】:
标签:
javascript
reactjs
loops
for-loop
【解决方案1】:
当然,在 React 中,您需要为数组的所有元素传入一个唯一的键值。否则,您将在控制台中看到此警告。
警告:数组或迭代器中的每个子元素都应该有一个唯一的“key”属性。
因此,作为一个懒惰的开发人员,您只需将循环的索引值作为子元素的键值传递。
当索引用作键时,重新排序列表或从列表中添加和删除项目可能会导致组件状态出现问题。如果键是索引,则重新排序项目会更改它。因此,组件状态可能会混淆,并可能将旧密钥用于不同的组件实例。
哪些例外情况可以安全地使用索引作为键?
- 如果您的列表是静态的并且不会更改。
- 列表永远不会重新排序。
- 列表不会被过滤(添加/删除项目
列表)。
- 列表中的项目没有 ID。
键应该是唯一的,但只能在其兄弟之间。