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

Question

我正试图通过for循环创建一组反应元素。但是，似乎每个元素不是每个元素都获得每个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;