Question

我有以下代码：

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

reactjs - 单击时将参数发送到函数

1 个答案: