React填题组件切换题目时状态未更新的解决方案咨询

问题分析 #

使用React、NextJS和ReactDnD开发填空练习题Demo时，ExempleFill组件接收text、blanks、options作为参数，内部维护answers状态存储填空ID与答案ID的映射。父组件通过attempts状态切换题目时，新题的文本和备选答案已更新，但answers状态及子组件FillBlank的内容未重置，导致旧答案残留（比如旧题的10x出现在新题的填空位置）。

核心原因 #

ExempleFill的answers状态仅在内部作答时更新，父组件切换题目触发props更新后，组件未正确触发answers的重置逻辑；或之前的useEffect依赖项设置错误，导致重置逻辑未执行。

优化解决方案 #

方案1：基于题目唯一ID重置状态 #

给每道题分配唯一questionId并作为props传入ExempleFill，通过useEffect监听questionId变化，自动重置answers状态：

import { useEffect, useState } from 'react';

function ExempleFill({ text, blanks, options, questionId }) {
  const [answers, setAnswers] = useState({});

  // 监听题目ID变化，重置答案状态
  useEffect(() => {
    setAnswers({});
    // 如需重置ReactDnD拖拽状态，可在此添加对应逻辑
  }, [questionId]);

  // 作答、渲染等其他逻辑
  return (
    // 组件渲染内容
  );
}

父组件中，每次切换题目时传入对应questionId：

function ParentComponent() {
  const [attempts, setAttempts] = useState(0);
  // 题目数组，每个题目包含唯一questionId及其他参数
  const questions = [
    { 
      questionId: 1, 
      text: ['5x+3x = __'], 
      blanks: [{ id: 'blank1' }], 
      options: [{ id: 'opt1', value: '8x' }, { id: 'opt2', value: '10x' }, { id: 'opt3', value: '5x' }] 
    },
    { 
      questionId: 2, 
      text: ['9y-4y = __'], 
      blanks: [{ id: 'blank2' }], 
      options: [{ id: 'opt4', value: '5y' }, { id: 'opt5', value: '13y' }, { id: 'opt6', value: '3y' }] 
    },
  ];
  const currentQuestion = questions[attempts % questions.length];

  return (
    <div>
      <ExempleFill 
        text={currentQuestion.text} 
        blanks={currentQuestion.blanks} 
        options={currentQuestion.options}
        questionId={currentQuestion.questionId}
      />
      <button onClick={() => setAttempts(prev => prev + 1)}>切换题目</button>
    </div>
  );
}

方案2：使用key强制组件重建 #

无需修改ExempleFill内部逻辑，给组件添加随题目变化的key属性（如questionId或attempts），React会在key变化时卸载旧组件、重建新组件，自动重置所有内部状态：

function ParentComponent() {
  const [attempts, setAttempts] = useState(0);
  const questions = [/* 题目数组 */];
  const currentQuestion = questions[attempts % questions.length];

  return (
    <div>
      <ExempleFill 
        key={currentQuestion.questionId} {/* 或key={attempts} */}
        text={currentQuestion.text} 
        blanks={currentQuestion.blanks} 
        options={currentQuestion.options}
      />
      <button onClick={() => setAttempts(prev => prev + 1)}>切换题目</button>
    </div>
  );
}

该方案实现简单，适合快速解决问题；若组件初始化成本较高，优先选择方案1。

方案3：监听props变化自动重置 #

若无法添加questionId，可监听blanks或options的引用变化触发重置，需确保父组件切换题目时传递新的数组引用（而非修改原数组）：

useEffect(() => {
  setAnswers({});
}, [blanks, options]);

关键注意事项 #

• ReactDnD状态同步：若使用useDrag/useDrop，需在重置answers时同步重置拖拽相关临时状态（如拖拽中元素标记）。
• 状态更新规范：必须通过setAnswers修改状态，禁止直接修改answers对象，否则React无法检测状态变化。

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