reactjs - 单击时将参数发送到函数[重复]答案

【问题标题】：reactjs - send parameter to function on click [duplicate]reactjs - 单击时将参数发送到函数[重复]
【发布时间】：2018-03-03 18:23:22
【问题描述】：

我有以下代码：

class App extends React.Component {
  constructor() {
    super();

    this.state = {
        countries: [{code: 'aa', name: 'abc'}, {code: 'bb', name: 'bbb'}]
    }
  }

  setCountry(country) {
    console.log(country);
  }

  render() {
    var countriesList = [];
    for (var i = 0; i < this.state.countries.length; i++) {
        var code = this.state.countries[i].code;
        var name = this.state.countries[i].name;
        countriesList.push(
            <li key={i} onClick={() => this.setCountry({code: code, name: name})}>
                <span>
                    <img src={"/assets/images/country/" + code + ".jpg"} alt={code} title={code} /> {name}
                </span>
            </li>
        );
    }

    return (
        <div className="wrap">
            <ul>{countriesList}</ul>
        </div>
    );
  }
}

问题是无论我单击什么（li 上的 onclick 事件 - 渲染函数），它似乎都发送相同的参数（对应于数组的最后一个元素）。知道会发生什么吗？

【问题讨论】：

所有元素都包含相同的键？
i 在循环中，作为变量。不一样。
所以代码和名称应该不同，否则您的数组包含相同的代码和名称
是的，他们是。而且它们看起来不同（图像不同且正确，名称也不同）。我想也许我发送了一些东西作为参考，但我尝试发送循环变量（简单整数）并且遇到了同样的问题（总是记录最后一个）。
所以在 setCountry() 中，console.log 显示列表中所有记录的相同数据（最后一个）？

标签： javascript reactjs

【解决方案1】：

您正在循环中创建一个函数。当您单击按钮时，循环已完成执行。所以code 和name 变量指向最后一个迭代值。因此，每当您单击任何元素时，它都会传递code 和name 的最后一个值。您可以通过使用 map 这样的函数来避免这种情况

this.state.countries.map((country, i) => {
      var code = country.code;
      var name = country.name;
      countriesList.push(
        <li key={i} onClick={() => this.setCountry({ code: code, name: name })}>
          <span>
            <img src={"/assets/images/country/" + code + ".jpg"} alt={code} title={code} /> {name}
          </span>
        </li>
      );
    })

这是一个常见问题。我建议你使用linter rule 来避免这个问题。

【讨论】：

@zozo 我刚刚在答案中添加的 linter 规则有一个显示问题的示例。另请阅读closures。
@zb22 因为那个东西是用循环执行的。因此它们在迭代过程中具有价值。但是onClick 处理程序在单击该内容时执行。直到此时循环完成并且code 和name 指向最后一个迭代值。所以它需要这些值。
@Prakash sharma，是的，ESLint 中的解释非常有用