React组件中focus事件触发async函数后无法多次调用showResult的问题

原代码的问题在于，你仅在组件初始化时执行了一次handleCb().then(showResult)，而绑定到focus事件的只有handleCb本身，没有关联后续的showResult调用。要让每次focus事件都触发完整的流程，可以通过一个包装函数来实现：

修改后的代码 #

import { useEffect, useCallback } from 'react';

const YourComponent = () => {
  const showResult = (result) => {
    // 这里是showResult的业务逻辑
    console.log(result);
  };

  const handleCb = async () => {
    return await Promise.resolve('good job');
  };

  // 包装函数：每次focus时完整执行异步流程+结果回调
  const handleFocus = useCallback(async () => {
    const result = await handleCb();
    showResult(result);
  }, [handleCb, showResult]); // 根据实际依赖调整数组内容

  useEffect(() => {
    // 绑定focus事件到包装函数
    window.addEventListener('focus', handleFocus);
    
    // 如果需要初始化时也执行一次，保留这行；不需要则删除
    handleFocus();

    // 组件卸载时清理事件监听，防止内存泄漏
    return () => {
      window.removeEventListener('focus', handleFocus);
    };
  }, [handleFocus]);

  return <div>你的组件内容</div>;
};

export default YourComponent;

关键说明 #

• 用handleFocus作为focus事件的处理函数，每次页面获得焦点时，都会完整执行handleCb异步操作，再调用showResult传递结果。
• 使用useCallback缓存handleFocus，确保只有当handleCb或showResult变化时，函数引用才会更新，避免useEffect重复执行事件绑定/解绑。
• 新增的清理函数会在组件卸载时移除事件监听，避免潜在的内存泄漏问题。

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