Question

我正在尝试通过for循环创建一组react元素。但是，似乎不是每个元素都为每个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;

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

1 个答案: