React切换组件时数据数组渲染为空，需手动刷新页面才显示的问题求助

各位好，我最近在React项目里碰到个头疼的问题，想请大家帮忙看看：

我有个Members.tsx页面，通过active变量来控制渲染TeamsList.tsx还是MembersList.tsx，切换的代码是这样的：

{active == "team" ? <TeamsList /> : <MembersList />}

这两个子组件都会调用后端接口获取数据，我代码里"Member"和"Player"是同一个概念，数据请求的函数大致如下（部分映射逻辑没写完）：

export async function GetAllPlayersAsync() {
  const myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/json");
  myHeaders.append("Authorization", getCookie('sessionId'));

  const requestOptions = {
    method: "GET",
    headers: myHeaders,
    redirect: "follow" as RequestRedirect
  };

  let players: IPlayer[] = [];
  
  fetch("http://localhost:3000/v1/players", requestOptions)
    .then((response) => response.json())
    .then((result) => {
      console.log(result) // 调试用，能看到后端返回了正确数据
      result.forEach((player: any) => {
        let playerData: IPlayer = {
          // 这里是把返回的player字段映射到IPlayer接口的逻辑
        };
        players.push(playerData);
      });
    })
    .catch((error) => console.error('获取玩家数据出错:', error));
  
  return players;
}

现在的问题是：当我切换active值来切换组件时，刚切过去的组件里数据数组是空的，完全不渲染内容，但手动刷新页面之后，数据就正常显示了。我看控制台的打印，后端确实返回了正确的数据，但组件就是不更新。

有没有大佬能帮我分析下问题根源，或者给个解决思路呀？

备注：内容来源于stack exchange，提问作者Zalán Csőke