React中useImperativeHandle无法获取更新后state问题求助

你遇到的是React闭包陷阱导致的状态旧值问题：

• onMouseDown函数创建时捕获了当前渲染周期的lines状态，当useImperativeHandle仅依赖lines更新暴露方法时，onMouseDown本身并未同步更新，导致每次调用时拿到的仍是初始空数组。
• 代码还存在变量定义顺序问题：onMouseDown在useImperativeHandle之后定义，JavaScript中const声明的变量无变量提升，会导致第一次渲染时useImperativeHandle引用的onMouseDown是未初始化的undefined。

1. 用函数式更新获取最新状态 #

修改setLines的调用方式，利用React函数式更新特性，直接获取最新的lines状态，无需依赖当前渲染周期的lines变量。

2. 修复变量顺序并缓存函数 #

用useCallback缓存onMouseDown，确保仅当依赖项变化时才重新创建函数，同时将缓存后的函数加入useImperativeHandle的依赖数组，保证暴露给父组件的方法始终是最新的。

修改后的代码：

const [lines, setLines] = useState([]);

// 先定义onMouseDown并用useCallback缓存
const onMouseDown = useCallback((e) => {
  const pos = e.target.getStage().getPointerPosition();
  // 函数式更新，prevLines为最新状态
  setLines(prevLines => [
    ...prevLines,
    {
      tool: activeTool,
      color: toolOptions.brush.color,
      size: toolOptions.brush.size,
      points: [pos.x, pos.y],
    },
  ]);
}, [activeTool, toolOptions.brush.color, toolOptions.brush.size]); // 加入所有用到的外部依赖

useImperativeHandle(
  ref,
  () => ({
    onMouseDown,
  }),
  [onMouseDown] // 依赖缓存后的函数
);

关键说明 #

• 函数式更新：setLines(prevLines => ...) 中的prevLines是React传入的最新状态，不受闭包影响，确保每次添加新线条都基于最新数组。
• useCallback：缓存onMouseDown，只有当依赖项（activeTool、画笔颜色/大小）变化时才重新创建，避免不必要的useImperativeHandle更新，同时保证暴露的方法能获取最新状态。
• 依赖数组：useImperativeHandle依赖onMouseDown，确保每次onMouseDown更新时，暴露给父组件的方法同步更新。

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