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>
    );
}

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

因此，在结束时，状态被更改，其值为{a:3}，但react不会呈现新的值。在react开发工具中，我可以清楚地看到状态：{a:3}。 如果我删除Promise.resolve，代码将按预期工作

另外一个问题是，为什么在控制台之后调用代码中间的渲染？Log1？< /p> 以下是完整的示例：

---

在promise callback中，您仅在第一次设置状态时设置一次状态；，在每一次尝试中，组件都不会渲染，因为当React渲染工作时，它会与前一个状态进行浅层比较，这总是正确的，因为它持有与javascript相同的对象引用：

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

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

这是初学者的一个常见错误

React未呈现最新状态的原因是您通过执行以下操作直接操纵状态：

const_state={a:1}； setState_状态； //您使用的是同一个对象 _状态a=2； setState_状态； //你在这里也使用同一个对象 _状态a=3； setState_状态； 您不应该直接改变状态，而应该将状态视为不可变的

要解决此问题，您需要创建状态的副本，更新您想要的任何属性，然后使用该新对象更新您的状态

常量handleClick==>{ Promise.resolve.then=>{ const_state={a:1}； console.log1； setState_状态； console.log2； const_state2={…_state，a:2}； 设置状态2； 1.log3； const_state3={…_state，a:3}； 设置状态3； 1.log3； }; }; 下面是一个工作示例：

此外，React将批处理状态更新，因此，有时如果您在一行中多次调用同一状态的setState时没有看到正确的行为，这是因为React试图通过批处理这些更新来防止不必要的重新渲染。但是，在您的情况下，它们不会成批处理，因为它们是在承诺中触发的

有关批处理如何在状态更新方面工作的更多信息，请参见此处：

---

是的，我知道。但是问题是状态被改变了，它的值现在是{a:3}，但它会呈现旧值？改变值不会触发呈现，差异状态是触发呈现的原因之一。我现在理解了，谢谢。关于我的问题的第二部分，为什么它在代码中间调用渲染？因为SESTATE是异步检查DOCS的，所以在调用第一个SETSTATE后几秒钟，当条件满足时，组件将进行渲染。我更新了我的答案，希望它能清楚地说明为什么渲染不显示最新的值，以及为什么每次setState调用都会触发渲染。

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

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