如何在setTimeout计时结束后执行cancelOrder并关闭弹窗

要实现计时结束时自动执行cancelOrder并关闭弹窗，只需修改useEffect中时间耗尽时的逻辑，先调用异步的cancelOrder函数，完成后再隐藏弹窗即可：

修改后的useEffect代码 #

useEffect(() => {
  if (time > 0) {
    const timer = setTimeout(() => setTime(time - 0.1), 100);
    return () => clearTimeout(timer);
  } else {
    // 时间耗尽时先执行取消订单逻辑，再关闭弹窗
    const handleTimeout = async () => {
      await cancelOrder();
      setHidden(true);
    };
    handleTimeout();
  }
}, [time, cancelOrder]);

关键说明 #

• 由于cancelOrder是异步函数，不能直接在useEffect的回调中使用async（会导致清理函数失效），因此在else分支内部定义了异步函数handleTimeout，先等待cancelOrder执行完成，再调用setHidden(true)关闭弹窗。
• 需要把cancelOrder添加到useEffect的依赖数组中，确保组件能正确追踪函数变化，同时避免ESLint的依赖缺失警告。

额外注意 #

如果cancelOrder内部的onCancel()已经包含隐藏弹窗的逻辑（比如修改了hidden状态），可以省略setHidden(true)，避免重复操作。

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