React为何遗漏已存入state的最后一个问题？风险评分应用排障

问题背景 #

我开发了一个用于风险评分的小型Web应用，核心流程是展示5个问题（A到E），用户勾选复选框对应加分，依次点击「下一步」完成所有问题后进入结果页。

遇到的Bug #

经过数小时调试仍卡在上同一问题：

• 预期结果：勾选所有复选框并完成5个问题后，结果页应显示A、B、C、D、E的评分结果
• 实际结果：结果页仅展示A、B、C、D，最后一个问题E的结果完全缺失

尝试过延迟调用getFinalResults()来展示结果，但又触发新问题：因没有后续问题，设置下一个问题时出现「undefined」错误。

最终解决方案 #

按照Linschlager的建议，在setState中使用回调函数处理后续逻辑，确保状态更新完成后再执行下一步操作。修正后的代码如下：

setNextQuestion() {
  if (this.state.boxStateValue === true) {
    this.setState((state, props) => ({
      resultCache: {
        ...state.resultCache,
        [this.state.question]: questionData[this.state.counter].points
      }
    }), () => {
      if (this.state.questionId === questionData.length) {
        this.getFinalResults();
      } else {
        this.setState({
          questionId: this.state.questionId + 1,
          counter: this.state.counter + 1,
          question: questionData[this.state.counter + 1].question,
          boxStateValue: false
        });
      }
    });
  }
}

问题根源解释 #

之前的代码大概率是在setState之后直接同步操作状态，但React的setState是异步执行的——调用setState后state并不会立即更新，这就导致判断是否到最后一题、更新下一题时，拿到的还是旧的state值，最后一个问题的结果没来得及存入resultCache就跳转到了结果页。

使用setState的回调函数后，所有依赖新状态的逻辑都会在状态更新完成后执行，既保证了最后一题的结果被正确缓存，也避免了因无后续问题导致的「undefined」错误。

内容的提问来源于stack exchange，提问作者malte238749874