如何根据 React 中的值将 API 数据呈现到单独的表中？

Question

我正在尝试在 React 中创建一个简单的 NBA boxscore Web 应用程序，但我无法将 API 数据呈现到每个游戏的单独表格中。我正在尝试根据 API 中的 gameID 值为每个游戏创建带有自己标题的单独表。我怎样才能做到这一点？

import React, { Fragment } from 'react';
import ScoreCards from './ScoreCards';

const ScoreCardData = ({ gameStats }) => {
return(
    <table>
        <tbody>
        <tr>
            <td>gameID</td>
            <td>Players</td>
            <td>FGM/A FG%</td>
            <td>FTM/A FT%</td>
            <td>3PTM</td>
            <td>PTS</td>
            <td>REB</td>
            <td>AST</td>
            <td>ST</td>
            <td>BLK</td>
            <td>TO</td>
        </tr>
        {Object.keys(gameStats).map((gameData, i) => {
            return(
                <Fragment>
                    <tr key={i}>
                        <td>{gameStats[gameData].game.id}</td>
                    </tr>
                </Fragment>
                ) 
            })
        }
        </tbody>
    </table>
 )
};


export default ScoreCardData;

这是我尝试呈现 API 数据的代码。我能够在一个表中获得所有游戏 ID 的列表，但我想根据 gameID 值将它们分开，以便我可以将每个表显示为单独的游戏。我还希望为每个表显示包含所有统计信息名称的标题行。

我基本上只是想创建一个简单的 NBA 得分网站，但我在将数据实际呈现为得分格式时遇到了麻烦。这是我创建的第一个 Web 应用程序，所以我很迷茫。任何帮助将不胜感激。

Fullsize Image

Answer 1

请这样尝试，如果要根据游戏ID显示单独的表格，我们需要先将数据按game.id分组，然后通过Object.keys循环原始gameStats数据。

演示链接：https://codesandbox.io/s/8yjwk4nzv2

import groupBy from "lodash.groupby";

const ScoreTable = props => {
  console.log("props.gameStats ", props.gameStats);
  return (
    <table>
      <tbody>
        <tr>
          <td>gameID</td>
          <td>Players</td>
          <td>FGM/A FG%</td>
          <td>FTM/A FT%</td>
          <td>3PTM</td>
          <td>PTS</td>
          <td>REB</td>
          <td>AST</td>
          <td>ST</td>
          <td>BLK</td>
          <td>TO</td>
        </tr>
        {props.gameStats.map((gameData, i) => {
          return (
            <Fragment>
              <tr key={i}>
                <td>{gameData.game.id}</td>
              </tr>
            </Fragment>
          );
        })}
      </tbody>
    </table>
  );
};

const ScoreCardData = props => {
  return Object.keys(props.gameStats).map((item, i) => {
    return <ScoreTable gameStats={props.gameStats[item]} />;
  });
};

const gameStats = [
  {
    game: { id: 47820 },
    player: {},
    stats: {},
    team: { id: 57, abbreviation: "POR" }
  },
  {
    game: { id: 47820 },
    player: {},
    stats: {},
    team: { id: 57, abbreviation: "POR" }
  },
  {
    game: { id: 5000 },
    player: {},
    stats: {},
    team: { id: 57, abbreviation: "POR" }
  },
  {
    game: { id: 5000 },
    player: {},
    stats: {},
    team: { id: 57, abbreviation: "POR" }
  },
  {
    game: { id: 6000 },
    player: {},
    stats: {},
    team: { id: 57, abbreviation: "POR" }
  }
];
const groupedData = groupBy(gameStats, "game.id");
console.log("groupedData ", groupedData);

Answer 2

如果gameStats 是一个对象数组，并且每个对象都是一个独特的游戏，您可以通过在地图函数中移动所有逻辑来为每个独特的游戏渲染一个table。这是假设您每场比赛都需要一个实际的<table>...</table>。

import React, { Fragment } from 'react';
import ScoreCards from './ScoreCards';

    const ScoreCardData = ({ gameStats }) => {
    return(
            {Object.keys(gameStats).map((gameData, i) => {
              return (
                <Fragment>
                 <table>
                  <tbody>
                   <tr>
                     <th>gameID</th>
                     <th>Players</th>
                     <th>FGM/A FG%</th>
                     <th>FTM/A FT%</th>
                     <th>3PTM</th>
                     <th>PTS</th>
                     <th>REB</th>
                     <th>AST</th>
                     <th>ST</th>
                     <th>BLK</th>
                     <th>TO</th>
                    </tr>
                    <tr key={i}>
                       <td>{gameStats[gameData].game.id}</td>
                       ...
                       <td>{gameStats[gameData].game.to}</td>
                    </tr>
                  </tbody>
                 </table>
                </Fragment>
             ) 
           })
          })
         };


    export default ScoreCardData;