从 Firebase 检索数据、对其执行计算并在 React（挂钩）中显示它的正确方法是什么？

Question

I am trying to retrieve several "game" objects from Firebase Storage, calculate some statistics on them, and then display the game statistics in a table. The outline of my code is as follows:

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);
  }, []);

The setLastModifiedText is the only hook that currently works, updating the text in the render() when I refresh in the browser. None of the statistical calculations display, however, unless I change something in the render() and save the file. When I attempt to perform the calculations and iterations inside the .then() call, where the setModifiedText, I run into more issues.

I am having difficulty figuring out what the issue is. I figure one of my async or useEffect() calls is out of place, but do not know where. Thanks for any help you can provide!

I attempted to change various async and useEffect() calls, as well as refactoring my functions, but no combination solved the problem.

Answer 1

I don't know if this is the optimal answer but this pattern worked for me:

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

useEffect(() => (setData(**your async call**), []);

useEffect(() => (setObject(data)), [data]);

The key is to make the async call for data in the background, then use another useEffect that has a dependency to the data being retrieved. When that data changes upon completion of the async call, the useEffect with a dependency on the retrieved data will run and force a rerender.