React JS中基于对象数组循环渲染Select组件option选项的问题

问题原因 #

1. 你当前只写了一个<Select>组件，所有生成的option数组自然都被塞进同一个下拉框中
2. 原有遍历逻辑仅生成了option集合，没有为数组中每个对象单独生成对应的Select组件
3. 额外注意：你原有代码的option内渲染的是键名（如received），不是你需要的显示文本（如Return Received）

正确实现方案 #

首先修正你的数组语法：

const arr = [
  { received: "Return Received", approved: "Approved", rejected: "Rejected" },
  { authorized: "Authorized", received: "Return Received" }
]

生成多组下拉框的逻辑：

// 外层遍历数组，每一项对应生成一个独立的Select
const selectList = arr.map((optionGroup, index) => (
  <Select native={true} key={index}>
    {
      // 内层遍历当前对象的键值对，生成对应option
      Object.entries(optionGroup).map(([key, label]) => (
        <option key={key} value={key}>{label}</option>
      ))
    }
  </Select>
))

渲染时直接调用生成的集合即可：

// 页面渲染位置直接写这行就行
{selectList}

内容的提问来源于stack exchange，提问作者Shantal Kaula