React函数组件useState状态异常排查：Quiz组件切换Question时chosenOption未初始化为null的问题

你遇到的问题核心是React的组件复用机制在搞鬼，我来一步步给你拆解清楚：

问题根源：React组件的复用与useState的初始化逻辑 #

首先你要明确一个关键点：函数组件里的useState(initialValue)只有在组件第一次挂载时会执行initialValue来初始化状态，后续组件更新时（比如props变化），这个初始值会被完全忽略，状态会保留之前的值。

回到你的代码：当你在Quiz组件里调用setCurrentQuestion(currentQuestion + 1)时，React会更新Quiz的状态，然后重新渲染。这时候，Quiz里的<Question />组件，虽然它的question、index等props变了，但React会判断这是同一个类型的组件（都是Question），所以它不会卸载旧的Question组件再重新挂载一个新的，而是直接复用现有的组件实例，只更新它的props。

这就导致，Question组件里的const [chosenOption, setChosenOption] = React.useState(null)，只有第一次渲染第一题时会把chosenOption设为null。之后切换到第二题、第三题时，组件是更新而非重新挂载，所以chosenOption会保留上一题选中的值，不会自动回到null。

验证你的日志现象 #

你说“除第一题外，'Chosen Option: '日志始终显示上一题的chosenOption而非null”，完全符合这个逻辑：

• 第一题：Question组件挂载，useState(null)生效，日志显示null；
• 第二题：Question组件更新，复用之前的实例，chosenOption保留第一题选中的值，日志显示上一题的选项；
• 后续题目同理。

另外，你在selectOption里的console.log('SELECTED: ', optionIndex, hasChosenCorrectOption, chosenOption)也会有小问题：setChosenOption是异步的，调用它之后不会立刻更新chosenOption的值，所以这里打印的chosenOption还是之前的旧值，不过这是另一个细节，和当前核心问题无关。

两种可行的解决方案 #

方案1：给Question组件添加唯一的key属性 #

这是最直接的解决方案。React会根据key来判断组件是否是同一个实例，如果key变了，React会卸载旧组件，挂载新组件，这样新组件的useState就会重新初始化。

修改Quiz组件里的Question渲染代码：

<Question 
  key={currentQuestion}  {/* 添加这一行 */}
  question={questions[currentQuestion]} 
  index={currentQuestion} 
  numberOfQuestions={numberOfQuestions} 
  onChoosenOptionCallback={onChoosenOptionCallbackHandler} 
/>

每次currentQuestion变化，key就会变，React会重新创建Question组件实例，chosenOption自然会回到null。

方案2：用useEffect监听props变化，手动重置状态 #

如果你不想通过key强制重新挂载组件，可以在Question组件里用useEffect监听题目相关的props，当props变化时手动把chosenOption设为null：

修改Question组件：

const Question = ({ question, index, numberOfQuestions, onChoosenOptionCallback }) => {
  const [chosenOption, setChosenOption] = React.useState(null)
  
  // 添加这个useEffect
  React.useEffect(() => {
    setChosenOption(null);
  }, [question, index]); // 当question或index变化时执行

  console.log('Chosen Option: ', chosenOption)
  // ... 其他代码不变
}

这样每次切换题目，question或index更新，useEffect就会触发，把chosenOption重置为null，达到你想要的效果。

总结 #

你之前的误区在于认为“每次渲染下一题时，Question组件的状态会自动初始化”，但实际上React会尽可能复用组件来优化性能，只有当组件被卸载再挂载，或者key变化时，才会重新执行状态初始化。上面两种方案都能解决你的问题，根据你的场景选择就行——如果只是单纯重置状态，方案1更简单；如果需要在切换题目时做更多逻辑处理，方案2更灵活。

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