使 React 属性不绑定到特定变量

Question

我正在尝试通过 for 循环创建一组反应元素。然而，似乎不是每个元素都获得自己的变量副本，而是它们与 for 循环末尾的变量(其中 i = 3(的任何变量相关联。我怎样才能防止这种情况。谢谢。

makeCheckboxes() {
var checkboxes = [];
for(var i = 0; i < this.props.flagNames.length; i++) {
console.log("Making checkbox. i = " + i);
checkboxes.push((
<React.Fragment>
<label><input type="checkbox" name="reportFlags" value="fraud" checked={this.state.reportFlags[i]} onClick={() => this.handleCheck(i)}/>{this.props.flagNames[i]} </label><br />
</React.Fragment>
));
}
return checkboxes;
};

Answer 1

只需替换

for(var i = 0; i < this.props.flagNames.length; i++) {

由

for(let i = 0; i < this.props.flagNames.length; i++) {

实际上它会创建一个闭包，所以它应该解决问题

如果您仍想使用var则可以使用立即调用的函数表达式iife像这样更改代码

for(var i = 0; i < this.props.flagNames.length; i++) {
console.log("Making checkbox. i = " + i);
checkboxes.push((
<React.Fragment>
<label>
<input 
type="checkbox" 
name="reportFlags" 
value="fraud" 
checked={this.state.reportFlags[i]} 
onClick={((j) => () => this.handleCheck(j))(i)} //here is the iife
/>
{this.props.flagNames[i]} 
</label><br />
</React.Fragment>
));
}
return checkboxes;