React中setState更新嵌套问题答案数组状态不生效问题求助

问题原因 #

你的两种实现方案都是直接修改了原有state对象的属性，没有生成全新的状态副本。React通过浅比较状态的引用来判断是否需要触发重渲染，原对象/数组的引用没有变化的情况下，React会认为状态没有更新，因此不会刷新视图。

正确实现方案 #

需要对嵌套的状态逐层生成新副本，保证修改节点的引用为全新值：

setTestInfo((prevState) => {
  return {
    // 拷贝顶层state
    ...prevState,
    info: {
      // 拷贝info对象
      ...prevState.info,
      // 生成新的questions数组
      questions: prevState.info.questions.map((question) => {
        // 非目标问题直接返回原对象
        if (question.id !== questionId) return question;
        // 目标问题生成新对象，同时处理答案数组
        return {
          ...question,
          // 生成新的answers数组
          answers: question.answers.map((answer) => {
            // 非目标答案直接返回原对象
            if (answer.id !== answerId) return answer;
            // 目标答案生成新对象，翻转选中状态
            return {
              ...answer,
              is_chosen: !answer.is_chosen
            };
          })
        };
      })
    }
  };
});

注意事项 #

• 永远不要直接修改原state内的对象、数组属性，所有修改都要基于副本操作
• 嵌套层级的状态需要逐层拷贝，确保修改路径上的所有节点引用都是全新的，才能被React的状态更新逻辑检测到

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