类组件转函数组件后SetState仅第二次点击更新问题求助

问题核心原因 #

1. 闭包捕获的state特性：函数组件的state是闭包变量，在单次点击回调的执行周期内，调用setXxx后不会立即更新当前作用域内的state值，后续代码仍然访问的是旧值。
2. Promise链嵌套导致执行顺序混乱：原代码中exportPaths()的Promise嵌套在外部then回调里，外层then会在内部Promise完成前执行，此时path还未被更新，直接访问path[0]就会触发undefined报错。
3. 类组件的巧合性正常：类组件中this.state是引用类型，虽然setState也是异步，但后续then回调中可能刚好能拿到更新后的state（原类组件代码实际也存在潜在的顺序问题，只是未触发报错）。

解决方案：用async/await重构+临时变量存储数据 #

将异步操作按顺序执行，把从canvas获取的所有数据存在临时变量中，直接用变量计算，避免依赖state的即时更新（state更新是异步的，当前函数执行完前不会触发组件重渲染）。

重构后的代码：

onClick={async () => {
  try {
    // 1. 导出图片并更新state
    const imgData = await canvas.current.exportImage("png");
    setImg_base64(imgData);

    // 2. 记录当前时间
    const currentDate = Date.now();
    setDate(currentDate);

    // 3. 导出路径，存到临时变量再更新state
    const pathData = await canvas.current.exportPaths();
    setPath(pathData);

    // 4. 计算路径数量，直接用临时变量
    setCount_path(pathData.length);

    // 5. 计算绘制总时长，基于临时路径数据
    await canvas.current.getSketchingTime();
    const firstPath = pathData[0];
    const lastPath = pathData.slice(-1)[0];
    setSketchTime(lastPath.endTimestamp - firstPath.startTimestamp);

    // 6. 计算从开始到第一次绘制的时长
    setStartTime(firstPath.startTimestamp - now);

    // 7. 执行提交
    submitTest();
  } catch (err) {
    console.error("操作执行失败:", err);
  }
}}

关键说明 #

• async/await确保所有异步操作按顺序执行，避免Promise嵌套导致的顺序混乱。
• 所有从canvas获取的核心数据（如pathData）都存在临时变量中，后续计算直接使用变量，绕开state异步更新的延迟问题。
• 添加try/catch捕获异步操作中的错误，便于调试排查问题。

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