React Native：更新状态的奇怪问题

Question

我正在使用以下代码：

makeRemoteRequest = () => {
    let items = []; 
    models.forEach(element => {  //models is an array of the list of models
        this.pushReports(element, items); 
    });
    console.log("This is the item array: ",items); 
    this.setState({
        data:items
    });
    console.log("This is the data in state: ",this.state.data); 
}

不知何故，items数组的控制台日志向我显示了我需要的数组，但是this.state.data的控制台日志为空。 这怎么可能？ 在设置状态之前，将立即运行items数组的日志。

这使我无法更新状态。

Answer 1

this.setState()不同步运行。 您的状态不能保证在下一个即时行上更新，但是会在下一个渲染周期正确更新。 尝试将console.log放在render() ，您会看到。

关于此主题的讨论在这里： https : //github.com/facebook/react/issues/11527#issuecomment-360199710

Answer 2

由于setState以异步方式工作。 这意味着在调用setState ， this.state不会立即更改。 因此，如果要在设置状态后立即执行操作，请使用第二个参数作为setState回调。 考虑以下示例：

this.setState({
    data: newData
}, () => {
  //TODO: Do something with this.state here
});

Answer 3

this.setState异步呈现。 而且您正在尝试在下一行中打印，这样它就不会立即产生想要的结果。

解决方案：在下一行中执行此操作，

setTimeout(() => {console.log("This is the data in state: ",this.state.data) }, 1000)