在for循环中反应Js点击事件[重复]

Question

我正在使用 React。这是我的代码：

var rows = [];
for(var i = 1; i <= this.state.numberOfPages; i++) {
    rows.push(<li key={i.toString()} onClick={() => this.getResults(i)}><a href="#">{i}</a></li>)
};

getResults()函数很简单：

getResults: function(page = this.state.currentPage) {
    console.log(page);
},

this.state.numberOfPages 等于 3。问题是，当我单击 <li> 标签时，控制台中始终显示 4。但是<li> 值在 HTML 中正确显示。我不明白为什么在通过参数传递时总是评估最后一个 i 值。

细节：

在 React Console 中，key 属性也是正确的。问题是with the parameter only。

在此先感谢，对我的英语感到抱歉。

Answer 1

如重复答案中所述，您需要使用一些内部函数来关闭变量。使用map 是实现此目的的简单方法：

var rows = new Array(this.state.numberOfPages).fill(0).map( ( zero, index ) =>
    <li key={index} onClick={() => this.getResults(index)}>
        <a href="#">{index}</a>
    </li>
)