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})