在 .map() 函数中反应递增变量答案

【问题标题】：React incrementing variable within .map() function在 .map() 函数中反应递增变量
【发布时间】：2020-03-24 03:12:58
【问题描述】：

我正在通过一个数组进行映射，我希望我的变量 i 用作我的组件的唯一键，但是我不知道如何（或在哪里）正确递增它，如果我添加一个 @987654322 @ 在<Component> 标签内，然后它将在屏幕上显示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>
  );
}

【问题讨论】：

标签： javascript arrays reactjs jsx

【解决方案1】：

你可以试试 array.map((x, Key) => console.log(key)); .. 您可以添加代码代替 console.log，它应该可以根据您的要求正常工作。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

天哪，我感觉好笨，因为我确实尝试过这种方法，但我总是会出错，我才意识到为什么，我总是在i之后添加)但是从未在item 之前添加(，所以我会关闭括号而不打开它....

【解决方案3】：

.map 已经提供了增量，只需在回调中添加第二个变量

  render() {
  var {array} = this.state;

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

【讨论】：