Reactjs 如何映射select组件中的字符串数组？

我有一个基于select标记构建的select组件。我有一个数据对象：

 const options= [
    { initialValue: "abc", data: ["data5", "data55", "data555"] },
    { initialValue: "zxy", data: ["data2", "data22", "data222"] },
  ];

在这里，我得到了2个具有初始值的下拉组件，但我没有得到初始值之后的数据

基本上，在我的选择中，我需要abc，data5，data55，data555和zxy，data，data2，data22，data222 但我得到的是abc，data5data55data555和zxy，Data2Data222

  {options.map((val, index) => {
        return (
          <Select>
            <option value="" key={index}>
              {val.initialValue}
            </option>

              <option value={`${val}`} key={index + 1}>
                {val.data}
              </option>;
          </Select>
        );
      })}

{options.map（（val，index）=>{
返回(
{val.initialValue}
{val.data}
;
);
})}

通过

Array.map（）

迭代

val.data

以添加多个

{options.map（（val，index）=>{
返回(
{val.initialValue}
{val.data.map（（d，j）=>(
{d}
)}
);
})}

您还必须使用映射迭代数据值

const options = [{
        initialValue: "abc",
        data: ["data5", "data55", "data555"]
    },
    {
        initialValue: "zxy",
        data: ["data2", "data22", "data222"]
    },
];

{options.map((val, index) => {
        return (
          <Select>
            <option value="" key={index}>
              {val.initialValue}
            </option>
            {
                val.data.map((d, i) => (<option value={`${d}`} key={`${index}-${i}`}>{d}</option>))
            }
          </Select>
        );
      })}

const选项=[{
初始值：“abc”，
数据：[“data5”、“data55”、“data555”]
},
{
初始值：“zxy”，
数据：[“数据2”、“数据22”、“数据222”]
},
];
{options.map（（val，index）=>{
返回(
{val.initialValue}
{
map（（d，i）=>（{d}））
}
);
})}

您可以使用

Array.map（）

两次

{
选项.map（（项目，索引）=>(
{item.initialValue}
{item.data.map（（值，索引）=>(
{value}
))}
))
}

我建议首先展平您的选项，然后使用单个数组和键集映射选项。它仍然像这里的其他几个答案一样“双重映射”，但以一种更为功能性的编程方式实现，即第二个映射不是嵌套的。它更加干燥，并且（主观上）更易于阅读

将每组选项映射到单个数组（即

初始值

和

数据

分散到其中）值，然后将其整体展平到包含所有选项值的单个数组

<select>
  {options
    .flatMap(({ initialValue, data }) => [initialValue, ...data])
    .map((option, index) => (
      <option key={index} value={option}>
        {option}
      </option>
    ))}
</select>

{选项
.flatMap（（{initialValue，data}）=>[initialValue，…data]）
.map（（选项，索引）=>(
{option}
))}

---

例如，您希望从

{initialValue:“abc”，data:[“data5”，“data55”，“data555”]}

中获得4个选项，即“abc”，“data5”，“data55”和“data555”？是的，我已经做了下面的解决方案，它确实对我有效，这就是为什么我在这里问这个问题。下面提供了答案。这个解决方案有效，我的问题是关键属性为什么你这么建议？@Sonny49啊，基本上就在你发表评论之前回答了这个问题。它更干燥，因为现在只有一个函数创建

选项

我还认为它更容易阅读，因为逻辑流现在已经扁平化，没有嵌套可阅读。