React setState调用后状态不更新，是否由ES6解构state操作导致？

问题结论 #

你遇到的setState状态不更新问题和ES6解构赋值没有任何关系，开头的解构只是在函数执行时捕获当前state的快照，属于JS正常的常量赋值逻辑，不会干扰setState的状态更新流程。

排查方向 #

你已经验证了setState回调中状态仍未更新，可以按以下优先级排查原因：

• 检查是否在代码中存在直接修改state的操作
  React禁止直接为this.state下的属性赋值，所有状态修改必须走setState。如果存在this.state.currentQuestionGroupId = xxx这类直接赋值操作，会导致React内部状态和外部表现不同步，出现setState无法更新的异常。
• 检查生命周期/更新拦截逻辑
  如果你的组件使用了shouldComponentUpdate生命周期，确认该方法在currentQuestionGroupId变化时没有返回false；如果继承自React.PureComponent，排查是否存在其他引用类型状态的错误更新，导致整体更新被拦截。
• 检查状态值的类型合法性
  打印currentQuestionGroupId的初始值及类型：如果初始值为undefined/NaN/字符串类型，执行+1操作后结果不符合预期，会让你误以为状态没有更新，你可以在setState回调中补充类型打印确认：

  console.log(typeof this.state.currentQuestionGroupId, this.state.currentQuestionGroupId)
  

• 排查是否存在其他逻辑覆盖状态
  检查是否有其他异步逻辑、componentDidUpdate生命周期中的代码，在setState执行后又将currentQuestionGroupId重置回了旧值。

代码优化建议 #

你当前代码中setQuestionDetails的调用位置错误，放在setState外部时永远拿不到更新后的状态值，需要移到setState的回调函数中执行：

handleSkipThisQuestionClicked = () => {
  const { answersDict, currentIndex, currentQuestionGroupId } = this.state;
  if (currentIndex < answersDict[currentQuestionGroupId].length - 1) {
    this.setQuestionDetails(answersDict[currentQuestionGroupId][currentIndex + 1]);
  } else {
    this.setState(
      (prevState) => ({
        currentQuestionGroupId: prevState.currentQuestionGroupId + 1,
        currentIndex: 0,
      }),
      () => {
        // 状态更新完成后再执行后续逻辑
        console.log(this.state.currentQuestionGroupId);
        console.log(this.state.currentIndex);
        this.setQuestionDetails(answersDict[this.state.currentQuestionGroupId][0]);
      },
    );
  }
};

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