我有一个
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()
但这也没有帮助
问题在于将
async/await
与 then/catch
中的 GetAllPlayersAsync
混合:在返回 await
之前,您不会 fetch
players
,这会导致返回一个空列表,该列表会在第二个 then
时填充被执行 - 但这发生在组件渲染之后。
修复它的方法不止一种。我建议您采用一种处理异步性的方法:
async/await
或then/catch
(为了保持一致性)。最快的修复方法是在 await
之前添加 fetch
(因为我不完全确定它会起作用),如下所示:await fetch("http://localhost:3000/v1/players", requestOptions)