React Hooks 延遲 setState 更新導致 function 異常

Question

我正在使用 React 構建一個測驗應用程序，我正在將問題作為數組獲取並維護狀態：

1. 包含所有問題的所有信息的數組——陳述、選項、選擇的答案、狀態（已回答、標記為審查、未訪問）；
2. object 顯示當前問題的所有信息
3. 當前選擇答案的索引（在 4 個單選按鈕中）

現在的問題是，當我選擇一個選項並單擊“保存並 go 到下一個問題”時，會觸發以下事件：

1. 更新當前問題信息（新狀態和選擇的答案）
2. 所有問題的數組都更新為當前問題的新信息
3. Go 到下一個問題（用下一個問題更新 state #2 (currentQuestionInformation)，並將 #3 設置為之前為該問題選擇的答案（如果選擇））

現在的問題是，當我們 go 到下一個問題時，即使我們已經回答並返回 state #3 沒有正確更新，這些事件按順序觸發是非常重要的。

在我的代碼中，因為我使用的是反應掛鈎，所以 state 更新是異步的，我沒有得到所需的正確序列。 在更新包含所有問題信息的數組之前，將觸發下一個問題 function。 我讀了很多答案，但他們都建議使用 Effect Hook。 但主要問題是我沒有 setStates 的通用用例。 例如，在更新總數組后，我不會 go 到下一個問題，這是一種特殊情況，我需要在 state #1 更新后觸發 goToNextQuestion() 。 我應該怎么做才能達到我要求的目標？

Answer 1

您可以有一個 useState 掛鈎，它具有包含所有這些狀態的 object。 更新時，您可以一次更新它們。

const [myState, mySetState] = useState({questions:[],current:{},selected:0}

然后在更新時，復制舊值，解構它並替換為新信息

mySetState({...myState, current:newValue, selected:newSelected})