Question

首先，我检查是否支持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();
    }
};

Answer 1

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

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

如果您想要设置状态值，则必须使用它：

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

有关详情，请参阅setState

Answer 2

setState是异步方法，因此您可以使用这种响应方式。所以对于这个bug你可以看到 -

Is there a synchronous alternative of setState() in Reactjs

无法在setState中存储数据做出反应

2 个答案: