Reactjs 无法将所需参数传递给react render（）的jsx内的函数

基本上，我希望将与span元素关联的值传递给函数UpdateSelectedNumbers（）。但是，如果我使用for循环创建一个span元素数组，那么onClick eventhandler（UpdateSelectedNumbers）总是使用值9调用。当我使用map函数时，情况并非如此。有人能解释为什么会这样吗

const stars = [1,2,3,4,5,6,7,8,9];
var temp = [];
for(var i=0;i<9;i++){
    temp.push(<span className={getClass(i+1)} onClick={()=>props.UpdateSelectedNumbers(i+1)}>{i+1} </span>)
}
return (
     <div>
     {stars.map(x => <span className={getClass(x)} onClick={()=> props.UpdateSelectedNumbers(x)}>{x}</span>)}
     {temp}
     </div>
    )

const stars=[1,2,3,4,5,6,7,8,9]；
var-temp=[]；
对于（var i=0；i{i+1}）
}
返回(
{stars.map（x=>props.UpdateSelectedNumbers（x）}>{x}}
{temp}
)

因为

var

的作用域是最近的函数，所以所有

（）=>props.UpdateSelectedNumbers（i+1）

函数将获得

i

的最终值，即

8

---

您可以改为使用

let

，它的作用域是最近的封闭块，因此循环的每个迭代都有自己的值。

对于

i

使用

let

而不是

var

。谢谢，范围界定是错误的