Question

我正在尝试更新反应状态，然后立即将新状态添加到本地存储，如下所示

constructor(props) {
        super(props);
        this.state = {
            testState: "testValue"
        };
    }
testFunction = (test) => {
    this.setState({ testState: [...this.state.testState, test] });
    localStorage.setItem("dummy", this.state.testState.toString());
}

但是，当我调用本地存储方法时，状态变化并没有反映出来。

结果，我最终将旧值存储在本地存储中。

但是当testFunction执行完成时，该组件将以更新后的状态重新加载。

谢谢！

Answer 1

setState是异步调用，它不是直接更改状态的上下文，而是告诉DOM应该再次呈现，这一次是针对您修改的内容（状态或属性）使用新的上下文。您需要做的就是将localStorage的使用情况移至componentDidUpdate，只有这样才能保证您将存储正确的信息

     testFunction = test => this.setState({ testState: [...this.state.testState, test] })


     componentDidUpdate(prevProp, prevState) {
     // check testState has changed in last render
       if (prevState.testState != this.state.testState) localStorage.setItem("dummy", this.state.testState.toString());
   }

反应状态更新不反映

1 个答案: