依赖项变更时异步useEffect未执行完整函数体如何解决

useEffect 对传入的回调函数有明确要求：返回值只能是副作用清理函数或者 undefined。你直接给回调加了 async 关键字后，函数会默认返回一个 Promise 对象，React 既不会等待这个 Promise 状态变更，也不会捕获 Promise 内部抛出的未处理错误：

• 同步代码 console.log(account) 在 await 关键字之前，会在effect触发时立即执行
• 执行到第一个 await 时函数会让出主线程，后续异步逻辑如果抛出错误，会因为没有catch监听被静默吞掉，看起来就像"没有执行"
• 依赖快速变化、组件卸载时，未完成的异步链路没有中断逻辑，还可能引发内存泄漏、状态污染问题

不要直接给useEffect传入async函数，在effect回调内部定义异步函数再调用即可：

useEffect(() => {
  const initWeb3 = async () => {
    console.log(account);
    const web3 = await getWeb3();
    const acc = await loadAcc(web3);
    await loadContract(web3, acc);
  };

  // 加catch捕获异步链路的错误，方便排查问题
  initWeb3().catch(err => {
    console.error('web3初始化流程出错：', err);
  });
// 注意：effect中用到的所有外部引用都要加入依赖数组，避免闭包拿到陈旧值
}, [account, getWeb3, loadAcc, loadContract]);

如果account可能短时间内连续变化，会出现前一次异步请求晚于后一次返回的竞态问题，可以加标记位中断过期的异步流程：

useEffect(() => {
  // 标记当前effect上下文是否已失效
  let isInvalid = false;
  const initWeb3 = async () => {
    console.log(account);
    const web3 = await getWeb3();
    if (isInvalid) return;
    const acc = await loadAcc(web3);
    if (isInvalid) return;
    await loadContract(web3, acc);
  };

  initWeb3().catch(err => {
    console.error('web3初始化流程出错：', err);
  });

  // 依赖变化/组件卸载时，标记当前上下文失效
  return () => {
    isInvalid = true;
  };
}, [account, getWeb3, loadAcc, loadContract]);

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