为何我的Card List组件每次变更都会重新渲染？

先看你代码里导致重复渲染和逻辑错误的几个核心问题：

1. 异步状态更新的闭坑：getPlayersTeams里调用setTeamID后立刻用teamID，但React的状态更新是异步的，此时teamID还是旧值，不仅会导致getTeamById传错参数，还会因为teamID变化触发getPlayersTeams重建，进而让依赖它的useEffect重复执行，形成循环渲染。

2. 未正确处理函数依赖：getTeamById内部调用了getPlayerData，但getPlayerData没被useCallback包裹，每次组件渲染都会生成新的getPlayerData函数，而getTeamById的依赖是空数组，导致它一直引用旧的getPlayerData，引发闭包问题，同时可能触发不必要的重新渲染。

3. Promise.all的用法错误：原代码里map返回的是playerId数组，不是Promise数组，Promise.all无法正确等待请求完成，会导致逻辑混乱和可能的重复请求。

4. 缺少异步请求的清理：组件卸载后如果请求还在进行，会触发状态更新，导致警告和不必要的渲染。

修复后的代码 #

// 先把getPlayerData用useCallback包裹，稳定函数引用
const getPlayerData = useCallback(async (playerId) => {
  try {
    const res = await ligaApi.get(`/players/${playerId}`);
    const response = res.data;
    setIsLoading(true);
    setPlayers((prevState) => [...prevState, response]);
  } catch (err) {
    console.error('获取球员数据失败:', err);
  }
}, [setPlayers, setIsLoading]);

const getTeamById = useCallback(async (teamId) => {
  try {
    const res = await ligaApi.get(`/teams/${teamId}/players`);
    const response = res.data;
    // 修正Promise.all的用法：map返回Promise数组
    const getPlayerDataRequests = response?.map((x) => getPlayerData(x.playerId));
    await Promise.all(getPlayerDataRequests);
  } catch (err) {
    console.error('获取球队球员列表失败:', err);
  }
}, [getPlayerData]); // 加入getPlayerData作为依赖

const getPlayersTeams = useCallback(async (playerId) => {
  try {
    const res = await ligaApi.get(`/players/${playerId}/teams`);
    const teamId = res.data[0].teamId;
    setTeamID(teamId);
    // 直接用接口返回的teamId，不用等状态更新
    await getTeamById(teamId);
  } catch (err) {
    console.error('获取球员所属球队失败:', err);
  }
}, [getTeamById, setTeamID]); // 去掉teamID依赖，避免循环

useEffect(() => {
  const controller = new AbortController();
  const fetchData = async () => {
    setIsLoading(true);
    await getPlayersTeams(playerId);
    setIsLoading(false);
  };

  fetchData();

  // 组件卸载时取消请求并清理状态
  return () => {
    controller.abort();
    setPlayers([]);
  };
}, [getPlayersTeams, playerId, setIsLoading, setPlayers]);

关键修复说明 #

• 解决循环渲染：getPlayersTeams不再依赖teamID，因此teamID变化不会触发它重建，也就不会让useEffect重复执行。
• 稳定函数引用：用useCallback包裹getPlayerData，让getTeamById的依赖稳定，避免不必要的函数重建。
• 修正异步逻辑：直接使用接口返回的teamId，绕过异步状态更新的延迟，保证参数正确。
• 添加请求清理：用AbortController取消未完成的请求，避免组件卸载后触发状态更新，同时清理players状态。
• 修复Promise.all错误：确保map返回的是Promise数组，让所有球员数据请求完成后再继续逻辑。

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