確保更新多個狀態並在所有狀態更新后調用 function 的最佳方法 [React 功能組件]

Question

在我的用例中，有一些受控輸入組件以狀態存儲數據。 當我更改其中一個下拉輸入時，它會更改另外 3 個狀態並觸發 API 調用。 在進行 API 調用之前，如何確保更新 3 個狀態？ 我正在使用反應功能組件。

Answer 1

選項1

如果您使用 React 18 並在同一個 function 中調用這 3 個setState(...) ，則這些狀態可以保證在下一次重新渲染時更新，這要歸功於自動批處理。

因此，在這種情況下，您可以在這 3 個狀態中的任何一個上使用useEffect ，並在該效果中調用 API。 檢查此沙箱以獲取簡單示例。

選項 2

對於使用 React 17 或更早版本的人，您仍然可以獲得自動批處理，但僅限於 React 事件處理程序（請參閱這個很棒的答案）。 如果你在 React 事件處理程序之外更新狀態，最簡單的方法是，而不是使用三次，你只需將這些狀態放在一個useState中，以確保它們將同時更新，因為它們是在同一個 state 中。

例如：

const [state, setState] = useState({
  state0: 0,
  state1: 'a',
  state2: true,
})

useEffect(() => {
  // Call API here
}, [state])