如何为React的useEffect钩子添加async关键字实现异步逻辑

核心注意事项 #

• 不要直接给useEffect的入参回调函数添加async关键字：async函数默认返回Promise对象，而useEffect仅允许回调返回清理函数或undefined，直接添加会触发React告警，也可能导致副作用清理逻辑异常。
• 正确方案是在useEffect内部声明独立的async异步函数，再在回调中同步调用该函数。

改写后的完整代码 #

useEffect(() => {
  // 内部定义async异步函数
  const fetchPortfolios = async () => {
    const requestOptions = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      credentials: 'include',
    };

    try {
      const response = await fetch('/portfolios', requestOptions);
      if (response.status !== 200) {
        throw new Error(response.status);
      }
      const portfolios = await response.json();
      props.onSetPortfolios(portfolios);
      props.onSetFuturesPortfolios(portfolios);
    } catch (error) {
      console.log(error);
    }
  };

  // 调用异步函数
  fetchPortfolios();
}, []);

可选优化（处理组件卸载时取消请求） #

如果需要避免组件卸载后请求完成还执行状态更新导致的内存泄漏告警，可以添加AbortController逻辑：

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  const fetchPortfolios = async () => {
    const requestOptions = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      credentials: 'include',
      signal // 挂载请求取消信号
    };

    try {
      const response = await fetch('/portfolios', requestOptions);
      if (response.status !== 200) {
        throw new Error(response.status);
      }
      const portfolios = await response.json();
      props.onSetPortfolios(portfolios);
      props.onSetFuturesPortfolios(portfolios);
    } catch (error) {
      // 忽略主动取消的请求错误
      if (error.name !== 'AbortError') {
        console.log(error);
      }
    }
  };

  fetchPortfolios();

  // 清理函数：组件卸载时取消未完成的请求
  return () => controller.abort();
}, []);

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