无法在 React 中的 for 循环内获得增量值 [重复]答案

【问题标题】：Cannot get incremented value inside for loop in React [duplicate]无法在 React 中的 for 循环内获得增量值 [重复]
【发布时间】：2019-07-23 07:09:03
【问题描述】：

我有一个 for 循环，它应该循环两次。我想使用递增的值（1 和 2）来设置 id。但是，在这两种情况下，它都给了我 3 的值。

这是我的代码：

for(var i=1; i<=2; i++) { //Add two options by default
  this.setState(prevState => ({ //add option Object with default attributes
    options_array: [...prevState.options_array, { id: i,
                                                  description: '',
                                                  value: null  }], 
  })) 
}

【问题讨论】：

使用let 而不是var
在循环中构建新状态，然后调用setState，一次。

标签： javascript reactjs for-loop

【解决方案1】：

在for 循环中使用let 而不是var。

【讨论】：

非常感谢！它确实解决了问题。请大神指教一下造成这种情况的原因？
它是因为变量的作用域，其中 let 作用域将为每个循环删除，但 var 作用域仍然存在。
@UmarAdkhamov stackoverflow.com/questions/762011/…

【解决方案2】：

您需要为不同的i 将setState 函数包装在一个唯一的闭包中，否则它们将共享相同的引用。

for (var i = 1; i <= 2; i++) { //Add two options by default
    (i => this.setState(prevState => ({ //add option Object with default attributes
        options_array: [...prevState.options_array, {
            id: i,
            description: '',
            value: null
        }],
    })))(i);
}

【讨论】：

感谢您的回复。但是，使用 let 而不是 var 解决了这个问题。

【解决方案3】：

你也可以试试这个：

let newArray = [];
for(var i=1; i<=2; i++) { //Add two options by default
newArray.push({ id: i,description: '',value: null  });
}

  this.setState(prevState => ({ //add option Object with default attributes
    options_array: [...prevState.options_array, ...newArray], 
  }))

【讨论】：

【解决方案4】：

var objectsArray = [];

for(var i=1; i<=2; i++) {
  objectsArray.push(
    {
      id: i,
      description: '',
      value: null
    }
  )
}

this.setState(prevState => ({
    options_array: [...prevState.options_array, ...objectsArray], 
}))

像这样试试。

【讨论】：