React Js click event в цикле for

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 консоли, ключевое свойство правильно тоже. Проблема 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> 
)