如果页面未手动重新加载，React 数组在渲染时为空

Question

我有一个

Members.tsx

页面，根据

active

变量显示

MembersList.tsx

或

TeamsList.tsx

，代码如下：

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

这两个都使用此代码从后端服务器提取数据（短语“会员”和“玩家”在我的代码中是相同的）：

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) // Debug
      result.forEach((player: any) => {
        let playerData: IPlayer = {id: player.id, name: player.name, img: player.image_url, team: player.team, born: player.born};
        players.push(playerData);
      });
    })
    .catch((error) => console.error(error));

  return players;
}

// it is in export, because I import these from a different file

我用

useEffect

来称呼它：

const [players, setPlayers] = React.useState<IPlayer[] | null>(null);

React.useEffect(() => {
  (async () => {
    const players = await GetAllPlayersAsync();
    setPlayers(players);
  })();
}, []);

当我进入此页面时，它可以正常工作，并正常显示玩家，但是当我将

active

切换到“团队”或返回“玩家”时，

MembersList.tsx

和

TeamsList.tsx

会将其呈现为数组是空的，除非我手动重新加载页面。我通过显示一个元素来测试它，如果 arra.length == 0 并且它是空的，如渲染所示，但我在每个

useEffect

上注销该数组，并且

players

更改并且其中包含数据。

视频： 显示问题

我尝试用

players

更新

setPlayers()

数据 还尝试将更改网址的按钮上的

Navigate("/teams")

更改为

window.location.href = "/teams"

但这并不是我想要的更改页面的顺利方式 尝试将

MembersList.tsx

s 键设置为

Math.random()

但这也没有帮助

Answer 1

问题在于将

async/await

与

then/catch

中的

GetAllPlayersAsync

混合：在返回

await

之前，您不会

fetch

players

，这会导致返回一个空列表，该列表会在第二个

then

时填充被执行 - 但这发生在组件渲染之后。

修复它的方法不止一种。我建议您采用一种处理异步性的方法：

async/await

或

then/catch

（为了保持一致性）。最快的修复方法是在 await 之前添加

fetch

（因为我不完全确定它会起作用），如下所示：await fetch("http://localhost:3000/v1/players", requestOptions)