reactjs - 点击[复制]发送参数到函数

Question

这个问题与以下内容完全相同：

• Pass data onClick event to the function in loop 1回答

我有以下代码：

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来避免这个问题。