我不知道為什么 state 會這樣更新？

Question

我只知道使用useState的 state 時更新，觸發組件及其子組件也重新渲染。 但是當寫下這段代碼時，不知何故會像這個控制台日志一樣更新。

import { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import { ChildA } from './ChildA.jsx';
import { ChildB } from './ChildB.jsx';


function App() {
  console.log('Parent render!')
  const [countA, setCountA] = useState(0);
  const [countB, setCountB] = useState(0);

  const asyncJustReturnNull = async () => {
    return null;
  }

  const countUpDouble = () => {
    setCountA(countA + 1);
    asyncJustReturnNull().then(() => {
      setCountA(countA + 1);
      setCountB(countB + 1);
    })
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <button onClick={() => countUpDouble()}>
          Update A and B at the same time.
        </button>
        <ChildA />
        countA is {countA}
        <ChildB />
        countB is {countB}
      </header>
    </div>
  );
}

export default App;

CodePen 如下。 https://codepen.io/showgotagami/pen/qBaBveG

Answer 1

因為當你打電話

setCountA(countA + 1);
justReturnNull().then(() => {
    setCountA(countA + 1);
    setCountB(countB + 1);
})

countA時，它的值都相同（最初為 0）。 那是因為setCountA實際上是異步的，不會立即改變countA的值。

一種更好地可視化的方法可能是這樣的：

const incrementA = () => {
    console.log(countA);
    setCountA(countA + 1);
}

const updateBoth = () => {
    incrementA();
    justReturnNull().then(() => {
        incrementA();
        setCountB(countB + 1);
    })
};

這樣我們就不再傳遞countA了。

Answer 2

一句話：

"State Updates are Merged"

它們同時發生。