如何使用反應 useState 鈎子防止競爭條件

Question

我有一個組件，它使用鈎子狀態 (useState) api 來跟蹤數據。

對象看起來像這樣

const [data,setData] =  React.useState({})

現在我有多個按鈕可以發出 API 請求並使用新密鑰設置數據

setAPIData = (key,APIdata) => {

    const dup = {
      ...data,
      [key]:APIdata
    }
    setData(dup)
}

現在，如果我同時發出多個請求，則會導致競爭條件，因為在 react 中設置狀態是異步的，並且我獲得了先前的值。

在基於類的組件中，我們可以通過一個 updater 函數來獲取更新的值，這個基於鈎子的組件是如何做的。

Answer 1

您必須使用帶有函數的 setData 作為其參數。 那么它總是會得到之前的狀態，不管它會以什么順序被調用。

  setAPIData = (key, APIdata) => {
    setData(prevData => ({
      ...prevData,
      [key]: APIdata
    }));
  };