Question

我正在通过数组进行映射，并且我希望将变量i用作我的组件的唯一键，但是，如果添加（），我不知道如何（或在哪里）正确地递增它。 {i++}标签内的<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>
  );
}

Answer 1

.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>
  );
}

Answer 2

map函数获得第二个参数，它是元素的索引：

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

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

Answer 3

您可以尝试array.map（（x，Key）=> console.log（key））; .. 您可以添加代码来代替console.log，它可以根据您的要求正常运行。

在.map（）函数中反应增量变量

3 个答案: