React useState函数内无法立即更新，如何获取正确score值？

问题原因 #

React的setState是异步批量更新机制，当你在按钮点击这类同步代码里调用setScore(score + 1)后，立刻读取score变量，拿到的还是更新前的旧值，这就造成了“分数总是滞后一步”的现象。

具体解决方案 #

1. 使用函数式更新State

当需要基于当前State的最新值来计算新State时，给setState传递一个函数而非直接赋值。这个函数会接收当前最新的State值作为参数，返回新的State，确保每次更新都基于最新状态：

const handleCorrectAnswer = () => {
  // 用prevScore接收最新的分数状态
  setScore(prevScore => prevScore + 1);
};

这种方式能保证你更新的是最新的分数，不会出现滞后问题。如果需要在更新后执行逻辑，不要直接在点击事件里用score变量，而是可以结合下面的useEffect方案。

2. 用useEffect监听Score变化处理后续逻辑

如果需要在分数更新完成后执行某些操作（比如打印最新分数、同步到后端等），可以通过useEffect监听score的变化，当score更新时自动触发逻辑：

import { useEffect } from 'react';

// ... 其他代码

useEffect(() => {
  console.log('当前最新分数：', score);
  // 在这里编写分数更新后的逻辑，比如提交分数、更新题目等
}, [score]); // 依赖数组中放入score，仅当score变化时执行该effect

适配你的Quiz场景 #

在你的答题应用里，每次用户答对题目后，先用函数式更新分数确保状态正确，再通过useEffect监听分数变化来处理后续流程（比如切换到下一题、展示分数提示等），就能彻底解决分数滞后的问题。

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