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

问题描述 投票:0回答:1

我有一个

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()
但这也没有帮助

reactjs typescript react-hooks rendering
1个回答
0
投票

问题在于将

async/await
then/catch
中的
GetAllPlayersAsync
混合:在返回
await
之前,您不会
fetch
players
,这会导致返回一个空列表,该列表会在第二个
then
时填充被执行 - 但这发生在组件渲染之后。

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

async/await
then/catch
(为了保持一致性)。最快的修复方法是在 await 之前添加
fetch
(因为我不完全确定它会起作用),如下所示:
await fetch("http://localhost:3000/v1/players", requestOptions)

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.