React - 从 API 获取数据并映射嵌套的 JSON

Question

几天来，我正在尝试解决以下问题。当然，我已经研究并尝试了几种错误消息的解决方案，不幸的是它们都不起作用。我不知道我做错了什么，因此想问问你。 :)

错误消息： “TypeError：无法读取未定义的属性（正在读取'map'）”

代码：

function App() {
  const [games, setGames] = useState();

  useEffect(() => {
    getGames();

    async function getGames() {
      const response = await fetch(
        "https://v3.football.api-sports.io/fixtures?season=2021&league=78&date=2021-12-04",
        {
          method: "GET",
          headers: {
            "x-rapidapi-host": "v3.football.api-sports.io",
            "x-apisports-key": "XXX",
          },
        }
      );

      const data = await response.json();
      setGames(data.parameters);
    }
  }, []);

  return (
    <div>
      <h1>Games</h1>
      <div className="games">
        {games.map((game, index) => (
          <div key={index}>
            <h2>{game.season}</h2>
          </div>
        ))}
      </div>
      )
    </div>
  );
}

export default App;

JSON： JSON GET EXAMPLE 稍后我想从 JSON 文件中提取团队。例如：response.teams.home.name

提前感谢您的关注！ :) 如果有任何信息缺失，请告诉我。

问候和感谢

Answer 1

如果您想适当地映射它，您需要了解数据的结构。

注意：不要将数组索引用于映射中项目的key。每个游戏都包含一个fixture 对象和一个id。

const API_KEY = prompt('Supply the API key'); // Provide the key first!

const { useEffect, useState } = React;

const apiHost = 'v3.football.api-sports.io';
const apiUrl = `https://${apiHost}/fixtures`;
const apiKey = API_KEY;

const toParamString = (obj) => new URLSearchParams(obj).toString();

const getGames = ({ season, league, date }) => {
  const url = `${apiUrl}?${toParamString({ season, league, date })}`;
  return fetch(url, {
      method: 'GET',
      headers: {
        'x-rapidapi-host': 'v3.football.api-sports.io',
        'x-apisports-key': apiKey,
      },
    })
    .then(response => response.json())
    .then(data => data.response);
};

const Score = (props) => {
  const { game: { fixture: { date }, score: { fulltime }, teams } } = props;
  
  return (
    <div className="score">
      <div className="score-date">{new Date(date).toLocaleString()}</div>
      <div className="score-grid">
        <div>{teams.home.name}</div>
        <div>{teams.away.name}</div>
        <div>{fulltime.home}</div>
        <div>{fulltime.away}</div>
      </div>
    </div>
  );
};

const App  = () => {
  const [games, setGames] = useState([]);
  
  useEffect(() => {
    getGames({
      season: 2021,
      league: 78,
      date: '2021-12-04'
    }).then(data => setGames(data));
  }, []);
    
  return (
    <div>
      <h1 style={{ textAlign: 'center' }}>Games</h1>
      <div className="games">
        {games.map((game) => {
          const { fixture: { id } } = game;
          return (
            <Score key={id} game={game} />
          );
        })}
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('react-app'));

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex: 1;
}

#react-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.score {
  border: thin solid grey;
  margin: 0.667em;
  padding: 0.33em;
}

.score-date {
  display: flex;
  justify-content: center;
  font-weight: bold;
  font-size: larger;
  margin-bottom: 0.25em;
}

.score-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.score-grid div {
  display: flex;
  justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react-app"></div>

Answer 2

你可以试试这个吗？

 function App() {
      const [games, setGames] = useState({});
    
      useEffect(() => {
        getGames();
    
        async function getGames() {
          const response = await fetch(
            "https://v3.football.api-sports.io/fixtures?season=2021&league=78&date=2021-12-04",
            {
              method: "GET",
              headers: {
                "x-rapidapi-host": "v3.football.api-sports.io",
                "x-apisports-key": "3914b827d25c9a793d6af1ec9c312d55",
              },
            }
          );
    
          const data = await response.json();
          setGames(data.parameters);
        }
      }, []);
    
      return (
        <div>
          <h1>Games</h1>
          <div className="games">
            {Object.keys(games).length > 0 && games.map((game, index) => (
              <div key={index}>
                <h2>{game.season}</h2>
              </div>
            ))}
          </div>
          )
        </div>
      );
    }
    
    export default App;