Javascript 反应&；JSX:HTML表中的嵌套Object.values

我有两个通过

Object.values（）.map

转换为数组的对象。我有一个

materialui

表，我想迭代数组并显示数组中的表数据

这两个数组是

玩家

和

统计数据

。我想在表的前两列中访问

players

中的数据，在接下来的两列中访问

stats

中的数据，然后在表单的最后两列中再次访问

players

中的数据。换句话说，

stats

夹在表列的

玩家之间

以下是我尝试过的：

                    {Object.values(player).map((player, key) => (
                        <TableRow>
                            <TableCell align="left" className={classes.tableContent}>{player[0].primaryNumber}</TableCell>
                            <TableCell align="left" component="th" scope="row"  className={classes.tableContent}>
                                {player[0].fullName}
                            </TableCell>
                            <TableCell align="left" className={classes.tableContent}>{player[0].primaryPosition.name}</TableCell>

                            // Getting an error because this .map is nested inside the player .map
                            {Object.values(stat).map((stat, key) => (
                                <TableCell align="left" className={classes.tableContent}>{stat[0].splits[0].stat.points}</TableCell>
                                <TableCell align="left" className={classes.tableContent}>{stat[0].splits[0].stat.goals}</TableCell>
                                <TableCell align="left" className={classes.tableContent}>{stat[0].splits[0].stat.assists}</TableCell>
                            ))}
                            <TableCell align="left" className={classes.tableContent}>{player[0].currentAge}</TableCell>
                            <TableCell align="left" className={classes.tableContent}>{player[0].height}</TableCell>
                            <TableCell align="left" className={classes.tableContent}>{player[0].weight}</TableCell>
                            <TableCell align="left" className={classes.tableContent}>{player[0].nationality}</TableCell>
                        </TableRow>
                    ))}

{Object.values（player.map）（player，key）=>(
{player[0]。primaryNumber}
{玩家[0]。全名}
{player[0].primaryPosition.name}
//获取错误，因为此.map嵌套在player.map中
{Object.values（stat.map）（stat，key）=>(
{stat[0]。拆分[0]。stat.points}
{stat[0]。拆分[0]。stat.goals}
{stat[0]。拆分[0]。stat.assists}
))}
{玩家[0]。当前年龄}
{玩家[0]。高度}
{玩家[0]。权重}
{玩家[0]。国籍}
))}

如何将内部
对象.values（stat）.map
成功嵌套到外部
对象.values（players）.map
中？有没有更干净的方法可以做到这一点？
您必须按照错误中的说明进行操作。试试这个

{Object.values(stat).map((stat, key) => (
                                <>
                                  <TableCell align="left" className={classes.tableContent}>{stat[0].splits[0].stat.points}</TableCell>
                                  <TableCell align="left" className={classes.tableContent}>{stat[0].splits[0].stat.goals}</TableCell>
                                  <TableCell align="left" className={classes.tableContent}>{stat[0].splits[0].stat.assists}</TableCell>
                                </>
                               ))}


{Object.values（stat.map）（stat，key）=>(
{stat[0]。拆分[0]。stat.points}
{stat[0]。拆分[0]。stat.goals}
{stat[0]。拆分[0]。stat.assists}
))}
错误是什么？相邻的JSX元素必须包装在一个封闭的标记中。你想要一个JSX片段。。。由于第二个.map嵌套在第一个中。请让我知道我下面的答案是否有效。如果没有，我们可能会尝试其他方法。您可以发布您的阵列和结构屏幕截图。您希望如何。