时间戳

首页 > 解决方案 > React 不呈现最新状态

reactjs - React 不呈现最新状态

问题描述

我有以下问题。

function App() {
    const [state, setState] = useState({ a: 0 });

    const handleClick = () => {
        Promise.resolve().then(() => {
            const _state = { a: 1 };

            console.log("1");
            setState(_state);

            console.log("2");
            _state.a = 2;
            setState(_state);

            console.log("3");
            _state.a = 3;
            setState(_state);
        });
    };

    return (
        <div>
            <button onClick={handleClick}>Test</button>
            <br />
            {console.log("render", state)}
            {state.a}
        </div>
    );
}

单击按钮后，控制台中会显示以下输出：

1
render {a: 1}
2
render {a: 2}
3

但它呈现{a: 1}而不是{a: 2}

所以最终状态发生了变化，它的值是{a: 3}，但是 react 没有呈现新值。在 react devtools 中我可以清楚地看到state: {a: 3}。如果我删除Promise.resolve代码将按预期工作。

另一个问题是，为什么它会在代码中间调用渲染（在console.log(1)?

这是完整的示例： https ://codesandbox.io/s/exciting-platform-0j45u

标签： reactjs

解决方案

在 Promise 回调中，您只在第一次设置状态一次setState(_state);，在每隔一次尝试时，组件不会渲染，因为 React 渲染工作时，它与之前的状态进行浅比较，这总是正确的，因为它拥有相同的对象参考（它是javascript）：

const state = { a: 1};
setState(state); // prevState = state;

state.a = 2;
prevState === state // always true so not render is triggered

这是一个常见的初学者错误，React 声明将状态视为不可变。.

推荐阅读