React Quiz组件点击按钮后state重置问题求助

你的问题核心是点击按钮触发了页面默认刷新，导致组件重新挂载，所有状态回到初始值，跟useRef没关系——页面刷新后ref也会重置，所以得先阻止页面刷新：

1. 阻止表单默认提交行为 #

如果你的选项按钮放在<form>标签里，默认按钮的type是submit，点击会触发表单提交，页面重载。解决方法二选一：

• 给按钮加上type="button"，明确它不是提交按钮：

<button type="button" onClick={() => handleAnswer(true)}>正确选项</button>

• 给外层<form>绑定onSubmit事件阻止默认行为：

<form onSubmit={(e) => e.preventDefault()}>
  {/* 选项按钮 */}
</form>

2. 用函数式更新确保状态正确 #

更新状态时，尽量用函数式写法获取上一次的状态值，避免闭包导致的状态更新异常：

const handleAnswer = (isCorrect) => {
  // 用prev获取最新状态
  setQuestionsAnswered(prev => prev + 1);
  if (isCorrect) {
    setCorrectAnswers(prev => prev + 1);
  }
};

为什么useRef没用？ #

useRef存的是可变值，但页面刷新后整个组件会重新初始化，ref里的值也会回到初始状态，所以它解决不了页面刷新导致的状态丢失问题——核心还是得先阻止页面刷新。

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