React函数组件调用useState的set方法后state变量未即时更新求助

React 的状态更新是批量异步执行的，你在同一个事件回调函数中调用 setFrom、setTo 之后，当前闭包内的 from 和 to 还是本次渲染携带的旧值，要等整个回调执行完成、React 触发重渲染之后，新的状态才会在下次渲染的闭包中拿到，这就是你看到打印值滞后一次的核心原因，和用 useState、useReducer 没有关系，是 React 状态更新的固有机制。

你要实现的点击选棋子再点落点的逻辑，不需要依赖状态更新后马上取新值，有两种常用的实现方式：

• 方案1：直接在状态更新的分支中处理对应逻辑，不要依赖回调末尾的打印值
  选棋子的逻辑直接放在第一个分支（!clicked 为 true 的分支）里写完，移动逻辑直接放在第二个分支（!clicked 为 false 的分支）里，拿到 i、j 直接计算，不需要等 to、from 状态更新后再处理。示例代码如下：

  const clickHandler = (i, j) => {
    if (!clicked) {
      // 选棋子阶段，直接用当前的i,j作为起点，不需要等setFrom更新
      const currentFrom = `${i},${j}`;
      setFrom(currentFrom);
      setClicked(true);
      // 可以在这里写选中棋子后的高亮逻辑，直接用currentFrom
      highlightPiece(currentFrom);
    } else {
      // 选落点阶段，直接用已有的from状态 + 当前i,j作为终点
      const currentTo = `${i},${j}`;
      setTo(currentTo);
      // 直接在这里写移动判断逻辑，用已有的from和刚拿到的currentTo就行
      if (isMoveValid(from, currentTo)) {
        movePiece(from, currentTo);
      }
      setClicked(false);
    }
  }
  

• 方案2：用 useEffect 监听状态变化，触发后续逻辑
  如果你确实需要在 from 和 to 都更新完成后执行移动逻辑，可以用 useEffect 监听两个状态的变化，满足条件时触发：

  useEffect(() => {
    // 当from和to都有值的时候执行移动逻辑
    if (from && to) {
      if (isMoveValid(from, to)) {
        movePiece(from, to);
        // 执行完重置状态
        setFrom("");
        setTo("");
      }
    }
  }, [from, to])
  

你之前用 useRef 遇到类似问题大概率是写法不对：useRef 的 .current 修改是同步生效的，但如果你还是在修改前的闭包里打印，也可能拿到旧值，不过你的场景用 useState 完全可以覆盖，不需要额外引入 useRef 增加复杂度。

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