React Native组件更新state后未刷新问题求助

问题分析 #

点击Check按钮后index状态已更新，但组件未正确刷新，下一题内容直接追加到原有内容后，核心原因有两点：

• 切换题目时未重置questionDone和answersDone状态，旧状态持续影响新题目的渲染逻辑
• 循环渲染的TypeWriter组件未设置唯一key，React复用了原有组件实例，未重新初始化打字机状态

具体修复步骤 #

1. 点击Check时重置关联状态

修改Check按钮的点击事件，更新index的同时重置题目和选项的完成状态：

<Button 
  onPress={() => {
    setIndex(prev => prev + 1);
    setQuestionDone(false);
    setAnswersDone({
      A: false,
      B: false,
      C: false,
      D: false,
    });
  }}
>
  Check
</Button>

2. 给循环的TypeWriter组件添加唯一key

在linuxData[index].answers.map循环中，为每个TypeWriter添加唯一key，避免React复用组件实例：

{linuxData[index].answers.map((answer, answerIndex) => {
  if (questionDone) {
    const letter = alphabet[answerIndex];
    const values = Object.values(answersDone);
    if (answerIndex === 0) {
      return (
        <TypeWriter
          key={`${index}-${answerIndex}`}
          text={`${alphabet[answerIndex]}. ${answer}\n`}
          delay={5}
          answer
          setQuestionDone={setQuestionDone}
          setAnswersDone={setAnswersDone}
          letter={alphabet[answerIndex]}
          answersDone={answersDone}
        />
      );
    } else if (values[answerIndex - 1] === true) {
      return (
        <TypeWriter
          key={`${index}-${answerIndex}`}
          text={`${alphabet[answerIndex]}. ${answer}\n`}
          delay={5}
          answer
          setQuestionDone={setQuestionDone}
          setAnswersDone={setAnswersDone}
          letter={alphabet[answerIndex]}
          answersDone={answersDone}
        />
      );
    }
  }
})}

注：把循环参数index改为answerIndex，避免和外层状态变量冲突，提升代码可读性。

3. 确保TypeWriter组件响应props变化

如果TypeWriter是自定义组件，需在text props变化时重置自身打字状态，可通过useEffect监听：

// TypeWriter组件内部
React.useEffect(() => {
  // 重置显示文本与完成状态
  setDisplayText('');
  setIsDone(false);
}, [text]);

验证修复 #

完成修改后，点击Check按钮时：

• 会重置题目和选项的完成状态，确保新题目从初始状态渲染
• React会识别新key，销毁旧组件实例并创建新实例，避免内容追加
• TypeWriter组件会在text变化时重置自身状态，重新执行打字逻辑

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