Javascript setState被设置为数组onClick的最后一个元素，而与目标元素无关

我在一个数组中循环以渲染值。我需要在单击某个项目时获取值并设置状态。现在，无论我单击哪个元素，它都会将状态设置为数组中最后一个元素的值

 renderValues = Values.valuesList.map((valueItem,i) => {
      return <div 
        onClick={() => this.getValue(valueItem.value)}
        key={i}
      >
        <p>{valueItem.value}</p>
      </div>
    })

我认为问题可能是我在调用onClick时使用了arrow函数。jslint还强调了在这样的循环中调用函数的错误做法

您可以单击任何值，状态将在底部字符串化。任何帮助都将不胜感激

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
currentValue:null，
}
}
getValue=（valueToGet）=>{
这是我的国家({
currentValue:valueToGet，
})
};
render（）{
常量值={
估价员：[{
价值：“价值一”
},{
值：“值二”，
},{
值：“值三”，
}
]
};
var renderValues=[]；
var valuesList=Values.valuesList；
对于（变量i=0；i
{valueItem.value}

)
}
返回(
{renderValues}
{JSON.stringify（this.state.currentValue）}
)
}
}
ReactDOM.render（，document.querySelector（#app））

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
}
p{
填充底部：50px；
}

---

您指出问题在于循环中创建的函数是绝对正确的。当您在循环中定义函数时，将创建一个闭包，并且在闭包中传递的最后一个值是第三个值，该值显示在所有onClick函数中

---

详细的解释可以在

中找到，而不是传统的循环，您可以使用来迭代数组

 renderValues = Values.valuesList.map((valueItem,i) => {
      return <div 
        onClick={() => this.getValue(valueItem.value)}
        key={i}
      >
        <p>{valueItem.value}</p>
      </div>
    })

renderValues=Values.valuesList.map（（valueItem，i）=>{
返回此.getValue（valueItem.value）}
key={i}
>
{valueItem.value}

})

---

循环中的箭头函数不是问题所在，但包含不安全的变量

valueItem

对变量

valueItem

使用

let

而不是

var

，可以使代码正常工作

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
currentValue:null，
}
}
getValue=（valueToGet）=>{
这是我的国家({
currentValue:valueToGet，
})
};
render（）{
常量值={
估价员：[{
价值：“价值一”
},{
值：“值二”，
},{
值：“值三”，
}
]
};
var renderValues=[]；
var valuesList=Values.valuesList；
对于（变量i=0；i
{valueItem.value}

)
}
返回(
{renderValues}
{JSON.stringify（this.state.currentValue）}
)
}
}
ReactDOM.render（，document.querySelector（#app））

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
}
p{
填充底部：50px；
}

感谢您确认我的怀疑并提供有用的链接。这太棒了。非常感谢。我不经常用地图。您知道为什么在映射内调用箭头函数onClick不会导致与for循环中相同的问题吗？映射中的回调会在每次迭代中创建自己的作用域。也请检查此-。阅读本文，您将对

var

和

let

有清晰的认识。