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)