将获取的对象数组传递到状态，但不使用钩子在组件中进行渲染

Question

我有一个主要的应用程序渲染游戏卡组件。我存储了一个对象数组，该数组取自一个use效应状态，并使用useState和setInterval每分钟重新刻蚀一次。我可以注销我的游戏卡组件中传递的道具，但它不会渲染映射数据。它将正确显示加载并删除它一旦加载，它还将在div中显示“游戏”。它显示了我在状态中通过反应设备工具传递的道具。我也没有错误。我觉得我差点就有了，或者我写得完全错了。

我已经检查了文档，但这可能是一个特殊情况，因为我想在GameCard中分解阵列。我将嵌套对象的整个数组添加到状态，并在GameCard返回时对其进行分解。

注意：此api需要两个单独的抓取，一个用于获取链接数组（未显示），另一个用于循环每个链接以获取每个游戏的数据。

一个pp.js

import React, { useState, useEffect } from "react";
import "./App.css";
import getGameLinks from "./utils/getGameLinks";
import GameCard from "./GameCard";

function App() {
  const [games, setGames] = useState([]);
  const [link, setLink] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const getGameData = async () => {
      setLoading(true);
      if (link.length === 0) {
        const links = await getGameLinks(); // gets list of game links, required to get each game's data
        setLink(links);
      } else {
        const gameArray = [];
        link.forEach((link) => {
          fetch(link)
            .then((res) => res.json())
            .then((out) => gameArray.push(out));
        });
        const newGameArray = gameArray.sort((a, b) => a.gamePk > b.gamePk); // does not work
        setGames(newGameArray);
        setLoading(false);
      }
      const timer = setInterval(getGameData, 60000);
      return () => {
        clearInterval(timer);
      };
    };
    getGameData();
  }, [link]);

  return (
    <div className="App">
      <h1>Gameday</h1>
      <GameCard games={games} loading={loading} />
    </div>
  );
}

export default App;

游戏卡。js

import React from "react";

const GameCard = ({ games, loading }) => {
  if (loading) return <p>Loading...</p>;
  if (!loading)
    return (
      <div>
        <p>Games</p>
        {games.map((games) => (
          <p key={games.gamePk}>
            {games.gameData.teams.home.name} vs {games.gameData.teams.away.name}
          </p>
        ))}
      </div>
    );
};

export default GameCard;

Answer 1

关于你的评论，我还没有测试这个，但是我相信如果你替换link.for每个（link=

const gameArray = [];

for (const l of link) {
  const response = await fetch(l);
  const out = await response.json();
  gameArray.push(out);
};

不需要删除或更改任何其他内容。当然，您可能还需要在那里进行一些错误处理。