useReducer无法触发组件重渲染的问题排查求助

核心问题 #

你的QuestionBlock组件内部通过useState初始化props传入的值，但useState的初始值仅在组件首次挂载时生效。后续外部currentSection更新导致questionsInit等props变化时，组件内部的state不会自动同步，这就是组件始终显示初始状态的根本原因。

对应现象解释 #

1. reducer中打印的initialQuestionsState未变是正常逻辑——reducer是纯函数，不会修改原状态，只会返回新状态，你应该关注返回的新状态而非原状态。
2. 外部currentSection.questions已更新，但组件内questions还是初始值：因为useState([...questionsInit])只在组件挂载时执行一次，props更新不会触发它重新赋值。
3. 返回全新currentSection对象的做法符合不可变更新原则，问题不在reducer，而在组件内部state的同步逻辑。
4. 用Math.random()作为key能触发重渲染，是因为key变化会强制React卸载旧组件、挂载新组件，此时useState会重新执行初始化拿到新props值，但这是非常规hack手段，不建议使用。
5. useEffect能监听到currentSection更新，说明props确实传递到了组件，但内部state没有同步更新。

解决方案 #

方案1：直接使用props（优先推荐，若组件无需修改状态）

如果组件内部不需要修改questions、looping等数据，完全可以直接使用props传入的值，不需要存在useState里。这样props更新时，组件会自动重渲染并使用最新值：

const QuestionBlock = ({ onFinishQuestions, questionsInit, dataSet }) => {
  const [currentQuestion, setCurrentQuestion] = useState(0);
  
  // 直接使用props的值，无需存入state
  const questions = questionsInit;
  const dataSetName = dataSet;
  const lastSecondQuestion = questionsInit[questionsInit.length - 2];
  const looping = lastSecondQuestion?.looping;
  const lineItems = looping ? [...questionsInit[questionsInit.length - 1].variable] : [];

  // 其他逻辑...
};

方案2：用useEffect同步props到内部state（若组件需要修改状态）

如果组件内部需要修改这些数据（比如用户操作要更新questions），则需要通过useEffect监听props变化，主动同步到内部state：

const QuestionBlock = ({ onFinishQuestions, questionsInit, dataSet }) => {
  const [questions, setQuestions] = useState([...questionsInit]);
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [dataSetName, setDataSetName] = useState(dataSet);
  const [lineItems, setLineItems] = useState(
    questionsInit[questionsInit.length - 2]?.looping && [
      ...questionsInit[questionsInit.length - 1].variable,
    ]
  );
  const [looping, setLooping] = useState(questionsInit[questionsInit.length - 2]?.looping);

  // 监听props变化，同步更新内部state
  useEffect(() => {
    setQuestions([...questionsInit]);
    setDataSetName(dataSet);
    // 处理数组越界情况，避免报错
    const lastSecondQuestion = questionsInit[questionsInit.length - 2];
    if (lastSecondQuestion) {
      setLooping(lastSecondQuestion.looping);
      if (lastSecondQuestion.looping && questionsInit.length > 0) {
        setLineItems([...questionsInit[questionsInit.length - 1].variable]);
      } else {
        setLineItems([]);
      }
    }
  }, [questionsInit, dataSet]); // 依赖项必须包含所有需要同步的props

  // 其他逻辑...
};

额外说明 #

你的reducer中PREFILL类型的处理代码符合不可变更新原则：

• 复制了questions数组和questionSections数组
• 对每个question对象做了浅拷贝并修改
• 返回了全新的state对象

状态更新本身是正确的，无需调整reducer逻辑。

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