使用 map 和 ES6 箭头函数通过 Optgroups 生成选项

Question

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

    "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" }
    ]
  },
]

但无论如何，为了回答你关于如何映射它的问题，我会这样做：请注意你的数组有一个对象所以我抓住你的团队数组中的第一个项目然后迭代 keys/values。假设您想遍历第一个对象，我会这样做：

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>
});

使用 map 和 ES6 箭头函数通过 Optgroups 生成选项

Generate Options with Optgroups using map and ES6 arrow functions

json

dictionary

jsx

ecmascript-6