javascript - Reactjs - 单击时将参数发送到函数

Question

这个问题已经有答案了:

Pass data onClick event to the function in loop (1 个回答)

已关闭 5 年前。

我有以下代码:

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 事件)，它似乎都会发送相同的参数(对应于数组的最后一个元素)。知道会发生什么吗？

Answer 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以避免将来出现此问题。