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)

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

3 个答案: