【问题标题】: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}/>)

【问题讨论】:

  • map函数的第一个参数是元素本身,而不是key。此外,就像它在本网站的副本中所说的那样,react 文档确实提到了这一点:reactjs.org/docs/lists-and-keys.html

标签: javascript reactjs loops for-loop


【解决方案1】:

当然,在 React 中,您需要为数组的所有元素传入一个唯一的键值。否则,您将在控制台中看到此警告。

警告:数组或迭代器中的每个子元素都应该有一个唯一的“key”属性。

因此,作为一个懒惰的开发人员,您只需将循环的索引值作为子元素的键值传递。

当索引用作键时,重新排序列表或从列表中添加和删除项目可能会导致组件状态出现问题。如果键是索引,则重新排序项目会更改它。因此,组件状态可能会混淆,并可能将旧密钥用于不同的组件实例。

哪些例外情况可以安全地使用索引作为键?

  • 如果您的列表是静态的并且不会更改。
  • 列表永远不会重新排序。
  • 列表不会被过滤(添加/删除项目 列表)。
  • 列表中的项目没有 ID。

键应该是唯一的,但只能在其兄弟之间。

【讨论】:

    猜你喜欢
    • 2016-03-09
    • 2010-09-11
    • 2010-12-21
    • 1970-01-01
    • 1970-01-01
    • 2014-04-29
    • 2011-02-22
    • 1970-01-01
    相关资源
    最近更新 更多