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

我正在尝试在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;

import React，{Fragment}来自'React'；
从“/ScoreCards”导入记分卡；
常量记分卡数据=（{gameStats}）=>{
返回(
配子体
球员
女性生殖器切割/女性生殖器切割%
FTM/A英尺%
3PTM
临时秘书处
雷布
AST
装货单
黑色
到
{Object.keys（gameStats）.map（（gameData，i）=>{
返回(
{gameStats[gameData].game.id}
) 
})
}
)
};
导出默认数据；

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

我基本上只是想创建一个简单的NBA篮球得分网站，但我在将数据转换成篮球得分格式时遇到了困难。这是我创建的第一个web应用程序，所以我非常迷茫。任何帮助都将不胜感激

---

如果

gameStats

是一个对象数组，并且每个对象都是唯一的游戏，则可以通过在map函数中移动所有逻辑，为每个唯一的游戏呈现

表。这是假设您希望每个游戏都有一个实际的
…

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;

import React，{Fragment}来自'React'；
从“/ScoreCards”导入记分卡；
常量记分卡数据=（{gameStats}）=>{
返回(
{Object.keys（gameStats）.map（（gameData，i）=>{
返回(
配子体
球员
女性生殖器切割/女性生殖器切割%
FTM/A英尺%
3PTM
临时秘书处
雷布
AST
装货单
黑色
到
{gameStats[gameData].game.id}
...
{gameStats[gameData].game.to}
) 
})
})
};
导出默认数据；
请这样尝试，如果要根据游戏id显示单独的表，我们需要先通过
game.id
对数据进行分组，然后通过
Object.keys
循环原始gameStats数据

演示链接：

从“lodash.groupBy”导入groupBy；
const scoredable=props=>{
log（“props.gameStats”，props.gameStats）；
返回(
配子体
球员
女性生殖器切割/女性生殖器切割%
FTM/A英尺%
3PTM
临时秘书处
雷布
AST
装货单
黑色
到
{props.gameStats.map（（gameData，i）=>{
返回(
{gameData.game.id}
);
})}
);
};
常量记分卡数据=道具=>{
返回Object.keys（props.gameStats）.map（（项目，i）=>{
返回；
});
};
常数gameStats=[
{
游戏：{id:47820}，
玩家：{}，
统计：{}，
小组：{id:57，缩写：“POR”}
},
{
游戏：{id:47820}，
玩家：{}，
统计：{}，
小组：{id:57，缩写：“POR”}
},
{
游戏：{id:5000}，
玩家：{}，
统计：{}，
小组：{id:57，缩写：“POR”}
},
{
游戏：{id:5000}，
玩家：{}，
统计：{}，
小组：{id:57，缩写：“POR”}
},
{
游戏：{id:6000}，
玩家：{}，
统计：{}，
小组：{id:57，缩写：“POR”}
}
];
const groupedData=groupBy（gameStats，“game.id”）；
log（“groupedData”，groupedData）；
您的第一组带有标题名的
标记应该是
标记，因为您试图呈现的是标题，而不是数据。
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);