React：如何在映射中根据状态计数器分配键和增加状态计数器？答案

【问题标题】：React: How to assign key based on state counter and increment state counter in mapping?React：如何在映射中根据状态计数器分配键和增加状态计数器？
【发布时间】：2019-04-27 03:21:05
【问题描述】：

我正在构建一个显示项目列表的反应应用程序（组件名称为“el”）。我希望每个项目都包含一个唯一键，该键只是一个计数器（此处称为“排名”），应用程序会为每个项目递增。我目前正在成功地将等级分配为映射中的键，但我不知道如何增加它，所以它对每个都是唯一的。这可能吗？我应该使用某种 for 循环而不是 map() 吗？

class App extends Component {
  constructor() {
    super();
    this.state = {
      someList:[/*Some List of Elements*/],
      rank:0,
    };
  }
  render() {
    const {myList, rank} = this.state;
    return (
      <section>
        <div className="container-fluid">
          <div className="row mb-5">
            <div className="col">
              <ul className="list-group" id="list">
                {myList.map(
                  (el) => <AListElement id={el.id} text={el.text} key={rank}/>
                )}
              </ul>
            </div>
          </div>
        </div>
      </section>
  }

【问题讨论】：

标签： reactjs key

【解决方案1】：

map() 函数为每个项目都带有一个唯一的索引计数器参数：

{myList.map(
  (el, index) => <AListElement id={el.id} text={el.text} key={index}/>
)}

【讨论】：

使用索引作为键是不好的做法。

【解决方案2】：

key 属性用于唯一标识元素。您无需维护状态即可传递给key。

.map() 方法将 index 作为第二个参数，您可以将其作为键传递，正如 Shawn 在他的回答中提到的那样。但一般来说，最好将唯一的字符串附加到 index 并将其传递给 key prop。

{myList.map(
  (el, i) => <AListElement id={el.id} text={el.text} key={`el_${el.id}_${i}`}/>
)}

为什么不只使用index 作为关键道具很重要

key 是 React 唯一用来识别 DOM 元素的东西。如果您将一个项目推送到列表或删除中间的某个项目会发生什么？如果 key 和之前一样，React 假定 DOM 元素代表和之前一样的组件。但这不再是事实。

这里有一个详细的例子和一个例子。

Index as a key is an anti-pattern

【讨论】：