Question

我正在构建一个显示项目列表（组件名称为“ el”）的react App。我希望每个项目都包含一个唯一的密钥，该密钥只是应用程序为每个项目递增的计数器（在此称为“等级”）。我目前已成功地将等级指定为映射中的键，但是我不知道如何增加它，因此它对于每个键都是唯一的。这可能吗？我应该使用某种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>
  }

Answer 1

map()函数为每个项目提供了唯一的索引计数器参数：

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

Answer 2

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

.map()方法以index作为第二个参数，您可以像Shawn在其答案中提到的那样将其作为键传递。但是通常，将唯一字符串附加到index并将其传递给关键道具是个好主意。

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

关于为什么重要的是不要只使用index作为关键道具

键是React用来识别DOM元素的唯一内容。如果将项目推送到列表或在中间删除某些内容，会发生什么？如果密钥与之前相同，则React假定DOM元素表示与以前相同的组件。但这不再是真的。

这是一个带有示例的精心编写的文章。

Index as a key is an anti-pattern

React：如何在映射中基于状态计数器和增量状态计数器分配密钥？

2 个答案: