如何根据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是一个对象数组，并且每个对象都是一个唯一的游戏，则可以通过在map函数中移动所有逻辑来为每个唯一的游戏渲染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;