javascript - 在 .map() 函数中 react 递增变量

Question

我正在通过一个数组进行映射，我想要我的变量 i用作我的组件的唯一键，但是我不知道如何(或在哪里)正确地增加它，如果我添加 {i++}在 <Component> 内tags 然后它将显示 i 的值在屏幕上，如果我改为添加 {this.function(i)}并放置 i++在函数内部，它将调用函数但变量 i将重新初始化为 0 的值每次，所以键值不会是唯一的。我需要 i 的值成为组件的关键，每次都必须递增 1，有谁知道我如何实现这一点？此外，正如您在代码中看到的那样，当单击该组件时，它将进行一个函数调用，该函数将发送 i 的值。被点击组件的参数作为被调用函数的参数。

代码:

  function(i) {
    console.log(i)
  }

  render() {

  var i = 0;
  var {array} = this.state;

  return (
    <div className="App">
    {array.map(item => (
      <Component key={i} onClick={(e) => this.function(i, e)}>
        <p>{item.name}</p>
      </Component>
    ))}
    </div>
  );
}

Answer 1

map 函数获取第二个参数，即元素的索引:

{array.map((item, i) => (
  <Component key={i} onClick={(e) => this.function(i, e)}>
    <p>{item.name}</p>
  </Component>
)}

请注意，如果您打算在运行时对该数组进行排序或更改其内容，那么使用数组索引作为键可能会导致一些错误，因为有时旧组件会被误认为是新组件。如果它只是一个静态数组，那么使用索引作为键应该不是问题。