无法在 setState 中存储数据反应答案

【问题标题】：Cant store data in setState react无法在 setState 中存储数据反应
【发布时间】：2017-11-03 10:51:03
【问题描述】：

首先我检查是否支持Localstorage，如果支持，我检查localstorage中是否有项目查询。如果有一个项目，它应该更新到查询状态。在 setState 之前，我有一个警报，它会很好地提醒该项目。但是在 setState 之后我再次发出警报但它什么也没显示？有人知道为什么吗？即使我将this.setState({query: localStorage.getItem("query")}) 替换为this.setState({query: 'test'})，它也不会在警报中显示测试？

getLocalStorage = () => {
    if (typeof(Storage) !== "undefined") {

        if (localStorage.getItem("query") !== null) {
            //Alerts 'a string'
            alert(localStorage.getItem("query"));

            this.setState({
                query: localStorage.getItem("query")
            });

            //Alerts nothing?
            alert(this.state.query);
            this.search();
        }
        else{
            this.getLocation();
        }
    }
    else {
        this.getLocation();
    }
};

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

setState 不会显示直接更改，这需要时间：

setState() 并不总是立即更新组件。它可能批处理或推迟更新。这使得阅读 this.state 就在调用 setState() 之后，这是一个潜在的陷阱。相反，使用 componentDidUpdate 或 setState 回调（setState(updater, 回调）），其中任何一个都保证在更新后触发已应用。如果需要根据前面的设置状态状态，请阅读下面的更新程序参数。

如果您想要在设置后立即使用状态值，则必须像这样使用它：

this.setState({
    query: localStorage.getItem("query")
},() => {
    alert(this.state.query);
});

更多详情请阅读setState

【讨论】：

@JustinTime，我的荣幸 :)

【解决方案2】：

setState 是异步方法，因此您会得到这种响应。所以对于这个错误你可以看到 -

Is there a synchronous alternative of setState() in Reactjs

【讨论】：