使用 map 和 ES6 箭头函数生成带有 Optgroups 的选项

Question

我在 React 中工作，我有以下数据结构，我试图从中生成选择下拉组件的选项，包括使用 map 和 ES6 存储三组团队成员的 OptGroups箭头函数。

    "teams": [
    {
        "Group A": 
            [
                { "id": "A1", "name": "John" },
                { "id": "A2", "name": "Erin" },
                { "id": "A3", "name": "Steve" }
            ],
        "Group B":
            [
                { "id": "B1", "name": "Mark" },
                { "id": "B2", "name": "Doug" },
                { "id": "B3", "name": "Sam" },
                { "id": "B4", "name": "Kate" }
            ],
        "Group C":
            [
                { "id": "C1", "name": "Michelle" },
                { "id": "C2", "name": "April" },
                { "id": "C3", "name": "Mike" },
                { "id": "C4", "name": "Albert" }
            ]
    }
]

在 JSON 与团队分组嵌套之前，我一直在使用这种语法：

let teamOptions = this.props.firm.teams.map(memb => <Option key={memb.id}>{memb.name}</Option>);

现在我已将团队成员嵌套到组中，但我无法找出处理此问题的正确方法。

我希望输出类似于：

<OptGroup label="Group A">
    <Option value="A1">John</Option>
    <Option value="A2">Erin</Option>
    <Option value="A3">Erin</Option>
</OptGroup>
<OptGroup label="Group B">
    <Option value="B1">Mark</Option>
    <Option value="B2">Doug</Option>
    <Option value="B3">Sam</Option>
    <Option value="B4">Kate</Option>
</OptGroup>
<OptGroup label="Group C">
    <Option value="C1">Michelle</Option>
    <Option value="C2">April</Option>
    <Option value="C3">Mike</Option>
    <Option value="C4">Albert</Option>
</OptGroup>

Answer 1

正如@Bergi 所提到的，您在示例数组中提供的结构是否有一个对象，而不是像这样的格式，这有点不清楚：

"teams": [
  {
    "name": "Group A",
    "players": [
      { "id": "A1", "name": "John" },
      { "id": "A2", "name": "Erin" },
      { "id": "A3", "name": "Steve" }
    ]
  },
  {
    "name": "Group B",
    "players": [
      { "id": "B1", "name": "Mark" },
      { "id": "B2", "name": "Doug" },
      { "id": "B3", "name": "Sam" },
      { "id": "B4", "name": "Kate" }
    ]
  },
]

但无论如何，要回答您有关如何映射它的问题，我会这样做：请注意，您的数组有一个对象，因此我将抓取您的团队数组中的第一项，然后遍历键/值.鉴于您想遍历第一个对象，我会这样做：

const keys = Object.keys(this.props.firm.teams[0]);
const values = Object.values(this.props.firm.teams[0]);

const teamOptions = values.map((group, i) => {
  <OptGroup label={keys[i]} />
    { group.map(player => <Option value={player.id}>{player.name}</Option>) }
  </OptGroup>
});