Question

在以下代码handlePage中始终报告30，而不是索引i。这不是严格与ReactJS相关，而是一般的JS行为。是什么原因造成的，我该如何解决？

  const handlePage = (x) => {
    console.log(x)
  }

  return (
     for(var i = 0; i<30; i++) {
         <div onClick={() => handlePage(i)}>{i}</div> 
     }
  )

Answer 1

因为当您单击循环时结束并且i = 30：）

您可以通过以下较小的修改来解决此问题：

const handlePage = (x) => {
  console.log(x)
}

return (
  for(let i = 0; i<30; i++) {
    <div onClick={() => handlePage(i)}>{i}</div> 
  }
)

使用'let'关键字，它使'i'的作用域为循环的内容，从而允许循环中的每个迭代使用新值：）

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

for循环中的ReactJS onClick处理程序仅获取index的最终值

1 个答案: