从Firebase检索数据，对其进行计算，并在React (hooks)中显示它的正确方法是什么? &

Question

我正在尝试检索几个"游戏";对象，计算一些统计数据，然后在表格中显示游戏统计数据。我的代码大纲如下:

function calculateTeamStatistics(team) {
// Iterating over all games, looking for team name in file, crunching the statistics
}
useEffect(() => {
async function prepareStatistics() {
// Iterating over all games, identifying teams (there is no list of teams)
calculateTeamStatistics(team)
}
prepareStatistics();
}, []);

useEffect(() => {
async function getAllGames(tournament: string) {
let gameFileReferences: any = [];
let allGames: any[] = [];
const storageRef = storage.ref();
let gameRef = storageRef.child(`${tournament}_results/`).listAll();
await gameRef.then((gameFiles) => {
gameFileReferences = gameFiles.items;
gameFileReferences.forEach((game: any) => {
storageRef
.child(`${tournament}_results/${game.name}`)
.getDownloadURL()
.then((url) => {
axios
.get(url, {
headers: {
Accept: "application/json",
},
})
.then((response) => {
allGames.push(response);
if (lastModifiedText === "" && response.headers) {
setLastModifiedText(response.headers["last-modified"]);
}
})
.catch((error) => console.log(error));
});
});
});
setTournamentGames(allGames);
}
getAllGames(tournamentId);
}, []);

setLastModifiedText是当前唯一工作的钩子，当我在浏览器中刷新时更新render()中的文本。然而，没有统计计算显示，除非我在render()中改变一些东西并保存文件。当我尝试在.then()调用(其中setModifiedText)中执行计算和迭代时，我遇到了更多问题。

我很难弄清楚问题是什么。我认为我的async或useEffect()呼叫之一是不合适的，但不知道在哪里。谢谢你提供的任何帮助!

我尝试改变各种async和useEffect()调用，以及重构我的函数，但没有组合解决问题。

Answer 1

我不知道这是否是最佳答案，但这种模式对我来说很有效:

const [data, setData] = useState(**your default value**);
const [object, setObject] = useState(**your default value**);
useEffect(() => (setData(**your async call**), []);
useEffect(() => (setObject(data)), [data]);

关键是在后台对数据进行异步调用，然后使用另一个useEffect，该useEffect依赖于正在检索的数据。当异步调用完成后数据发生变化时，依赖于检索数据的useEffect将运行并强制呈现。