Javascript react-native中的循环组件

我想使用以下对象返回一个类似于表的组件。但我必须只使用点数组。不需要头标签

const states = {
  player: [
    {
      id: 1,
      name: 'David',
      points: [3, 4, 8, 2, 5, 3, 9, 5, -4, -6, 2]
    },
    {
      id: 2,
      name: 'John',
      points: [3, 4, 8, 2, 5, 3, 9, 5, -4, -6, 2]
    },
    {
      id: 3,
      name: 'Sam',
      points: [3, 4, 8, 2, 5, 3, 9, 5, -4, -6, 2]
    },
    {
      id: 4,
      name: 'Johanson',
      points: [3, 4, 8, 2, 5, 3, 9, 5, -4, -6, 2]
    }
  ]
} 

我在react本地论文中使用DataTable。它有这样的结构

 <DataTable>
        <DataTable.Header>
          <DataTable.Title>Dessert</DataTable.Title>
          <DataTable.Title>Calories</DataTable.Title>
          <DataTable.Title>Fat</DataTable.Title>
        </DataTable.Header>

        <DataTable.Row>
          <DataTable.Cell>Frozen yogurt</DataTable.Cell>
          <DataTable.Cell>159</DataTable.Cell>
          <DataTable.Cell>6.0</DataTable.Cell>
        </DataTable.Row>

      </DataTable>

甜点
卡路里
脂肪
霜冻优格
159
6

我会这样做：

编辑：由于您希望渲染列中的点而不是行中的点，因此我假设所有玩家都有相同数量的点，并使用第一个玩家的点渲染行

const states={
玩家：[
{
id:1，
姓名：“大卫”，
要点：[3,4,8,2,5,3,9,5，-4，-6,2]，
},
{
id:2，
姓名：“约翰”，
要点：[3,4,8,2,5,3,9,5，-4，-6,2]，
},
{
id:3，
姓名：“山姆”，
要点：[3,4,8,2,5,3,9,5，-4，-6,2]，
},
{
id:4，
姓名：“约翰逊”，
要点：[3,4,8,2,5,3,9,5，-4，-6,2]，
},
],
};
函数MyDataTable（）{
返回(
{states.player[0].points.map（（p，i）=>(
{states.player.map（（player）=>(
{玩家积分[i]}
))}
))}
);
}

您的尝试在哪里？哪里出错了？实际上，我无法编写。您能否至少向我们提供此组件的预期输出，该表应如何？示例结果：类似于此，但始终循环播放程序[0]。我想循环每个球员的得分。并更改行和单元格。尝试代码，它将循环整个

状态。player

数组。抱歉。是的，我将循环所有玩家的积分。最后一个问题，如何更改行和列的位置。我想在专栏里写点东西。我最后只有4个纵队（4名球员）。非常感谢您：如果您满意，请接受（并投票）答案。谢谢：）

const states = {
  player: [
    {
      id: 1,
      name: "David",
      points: [3, 4, 8, 2, 5, 3, 9, 5, -4, -6, 2],
    },
    {
      id: 2,
      name: "John",
      points: [3, 4, 8, 2, 5, 3, 9, 5, -4, -6, 2],
    },
    {
      id: 3,
      name: "Sam",
      points: [3, 4, 8, 2, 5, 3, 9, 5, -4, -6, 2],
    },
    {
      id: 4,
      name: "Johanson",
      points: [3, 4, 8, 2, 5, 3, 9, 5, -4, -6, 2],
    },
  ],
};

function MyDataTable() {
  return (
    <DataTable>
      {states.player[0].points.map((p, i) => (
        <DataTable.Row key={p}>
          {states.player.map((player) => (
            <DataTable.Cell>{player.points[i]}</DataTable.Cell>
          ))}
        </DataTable.Row>
      ))}
    </DataTable>
  );
}