如何使用 useState 在 React 中異步設置 2 個狀態

Question

我有這個 function：

const [numbers, setNumbers] = useState([]);
const [rows, setRows] = useState([]);

const addRow = () => {
    setNumbers([...numbers, numbers.length+1]);
    setRows([...rows,
        <NewGradeRow key={numbers[numbers.length-1]} number={numbers[numbers.length-1]}/>]);
}

那應該添加新行。 它應該向數字掛鈎添加一個新值，然后使用數字掛鈎中的新值在行掛鈎中添加新行。 它同步運行，但新行不使用賦予數字掛鈎的新值。 我將如何解決這個問題？

Answer 1

從執行的計算中獲取新值（一加原始numbers的長度），而不是從numbers變量（尚未更新）中獲取：

const addRow = () => {
    const newNum = numbers.length + 1;
    setNumbers([...numbers, newNum]);
    setRows([...rows,
        <NewGradeRow
          key={newNum}
          number={newNum}
        />
    ]);
};

您還可以使用useEffect來觀察numbers的變化。 從addRow中刪除setRows ，然后執行：

useEffect(() => {
    const newNum = numbers[numbers.length - 1];
    setRows([...rows,
        <NewGradeRow
          key={newNum}
          number={newNum}
        />
    ]);
}, numbers.length);

（如果numbers的長度也可以從其他來源改變，你必須將其納入邏輯）

Answer 2

你這里有些誤會。 首先， setNumbers和setRows實際上是異步運行的，從某種意義上說，它們一起批處理以僅更改 state 一次，而不是單獨運行和更改應用程序 state 兩次。 閱讀此問題以了解此問題。

其次，您無法立即獲得 state 的“更新”值。 這與關閉有關。 閱讀此問題或本文以了解有關此問題的更多信息。 此問題適用於回調和掛鈎

Answer 3

“NewGradeRow”是一個 jsx 組件嗎？？ 如果是這樣，我懷疑它是否可以在 setRows state 中調用或聲明它應該與 setRows state 分開並放入返回語句中。