React中useState异步问题：如何实现基于itemSelected的score增减逻辑？

原代码的问题 #

1. setItemSelected 不支持第二个回调参数，你写的 setItemSelected(!itemSelected, setCallback()) 是错误写法，而且 setCallback() 会立即执行，根本等不到状态更新完成。
2. 就算能触发回调，setCallback 里访问的 score 和 itemSelected 都是闭包捕获的旧值，异步更新后这些值不会同步更新，导致逻辑判断完全不准。

方法一：用函数式更新直接处理逻辑 #

直接在点击事件里用函数式更新获取最新状态，这样能确保所有计算都基于最新的状态值：

const [score, setScore] = useState(0); 
const [itemSelected, setItemSelected] = useState(false);

const toggleItem1 = () => {
  setItemSelected(prevSelected => {
    const newSelected = !prevSelected;
    // 用函数式更新获取最新的score
    setScore(prevScore => {
      let newScore = prevScore;
      if (prevScore < 5) {
        newScore = newSelected ? prevScore + 1 : prevScore - 1;
      }
      if (newScore === 5) {
        completeSection();
      }
      return newScore;
    });
    return newSelected;
  });
};

函数式更新的参数是状态的最新值（比如 prevSelected、prevScore），能彻底避开异步更新带来的闭包问题，保证逻辑准确。

方法二：用useEffect监听状态变化 #

如果逻辑拆分更清晰，也可以用 useEffect 监听 itemSelected 的变化，每次状态更新后再处理分数：

const [score, setScore] = useState(0); 
const [itemSelected, setItemSelected] = useState(false);

const toggleItem1 = () => {
  setItemSelected(prev => !prev);
};

useEffect(() => {
  setScore(prevScore => {
    if (prevScore >= 5) return prevScore;
    const newScore = itemSelected ? prevScore + 1 : prevScore - 1;
    if (newScore === 5) {
      completeSection();
    }
    return newScore;
  });
}, [itemSelected]);

这里 useEffect 会在 itemSelected 变化时触发，同样用函数式更新获取最新的 score，确保计算基于最新状态。

关键注意点 #

• React 的 useState 更新本身就是异步批量处理的，别指望它同步更新状态变量。
• 只要需要基于旧状态生成新状态，就用函数式更新的写法（setState(prev => newVal)），别直接用当前的状态变量计算，否则十有八九会出错。

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