React异步API依赖调用问题：初始setStats获取results.id为undefined

核心问题分析 #

1. useEffect回调使用async的错误：第二个useEffect直接将回调设为async函数，这会导致返回Promise而非清理函数，触发React警告的同时，可能导致清理逻辑失效、异步执行顺序混乱。
2. 状态检查不严谨：仅通过Object.keys(results).length != 0判断状态是否就绪，无法确保results.id一定存在，容易传入undefined给setStats。
3. 异步状态更新的时序问题：React状态更新是异步的，若loadSummonerData内部仅调用setResults而未返回数据，依赖results的useEffect可能在状态未完全更新时触发。

修正方案 #

方案一：合并逻辑，统一控制异步流程

如果loadSummonerData是返回Promise的异步函数（推荐让它返回获取到的召唤师数据），可以将两个请求合并到一个useEffect中，确保时序可控：

useEffect(() => {
  let isMounted = true; // 防止组件卸载后执行无效状态更新

  const fetchAllData = async () => {
    try {
      if (Object.keys(results).length === 0) {
        // 先获取召唤师数据，确保拿到有效id
        const summonerData = await loadSummonerData();
        if (isMounted && summonerData?.id) {
          // 再调用setStats获取统计数据
          await setStats(summonerData.id);
          // 如果需要同步更新results状态，这里可以调用setResults(summonerData)
        }
      }
    } catch (err) {
      console.error("数据获取失败:", err);
    }
  };

  fetchAllData();

  // 清理函数：标记组件已卸载，重置状态
  return () => {
    isMounted = false;
    setResults({});
    setStats({});
  };
}, []);

方案二：保留双useEffect，修正异步写法

如果必须分开两个useEffect，重点修正async的使用方式，并强化状态检查：

// 第一个useEffect：加载召唤师数据
useEffect(() => {
  try {
    if (Object.keys(results).length === 0) {
      loadSummonerData();
    }
  } catch (err) {
    console.error("召唤师数据加载失败:", err);
  }
  return () => setResults({});
}, []);

// 第二个useEffect：根据召唤师id加载统计数据
useEffect(() => {
  let isMounted = true;

  const fetchStats = async () => {
    try {
      // 直接检查id是否存在，比判断对象长度更精准
      if (results?.id) {
        await setStats(results.id);
      }
    } catch (err) {
      console.error("统计数据加载失败:", err);
    }
  };

  fetchStats();

  return () => {
    isMounted = false;
    setStats({});
  };
}, [results]);

关键注意点 #

• 永远不要将useEffect的回调直接声明为async函数，应在内部定义async函数并调用，避免破坏清理函数的执行逻辑。
• 状态检查要精准：直接判断所需属性（如results?.id）是否存在，而非仅判断对象是否为空，从根源避免undefined传入。
• 添加isMounted标志：防止组件卸载后，未完成的异步请求（如API调用）触发状态更新，引发控制台错误。

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