javascript - 返回下拉列表中 array.map/Subcategories 中的多个元素

Question

我正在使用 array.map 循环嵌套数组。IndicatorCategories 是我的第一个数组，其中包含名称和 ID，以及名为 Indicators 的嵌套数组。

我将这些指标映射到react-bootstrap中的下拉列表，但我还必须映射类别的名称。

目前这是我的代码。

{indicatorCategories.map(indicatorCategory => {
            return (
              (
                <option
                  disabled
                  key={indicatorCategory.id}
                  value={indicatorCategory.id}
                >
                  {"---" + indicatorCategory.name + "---"}
                </option>
              ),
              indicatorCategory.indicators.map(indicator => {
                return (
                  <option key={indicator.id} value={indicator.id}>
                    {indicator.name}
                  </option>
                );
              })
            );
          })}

结果是我只映射了指标，指标类别没有显示。我猜 array.map 不会返回一个元素并映射到嵌套数组上？或者我只是犯了一个愚蠢的语法错误？已经和它搏斗了一段时间，但没有雪茄。

如果不可能，有哪些替代方案？我不喜欢使用一些悬停在类别上的方法来显示该类别的指标，因为它不太适合移动设备。

谢谢。

Answer 1

您可以结合使用reduce和map来完成您需要做的事情。这是一个带有虚拟数据的示例，您将其传输到 react 。

let data = [
    {
    id: 1, 
    value: 'a',
    data: [
      {id: 11, value: 'b'}
    ]
  },
  {
    id: 2, 
    value: 'aa',
    data: [
      {id: 12, value: 'bb'},
      {id: 12, value: 'bb'},
    ]
  }
]


let results = data.reduce((acc, cur) => {
    acc = acc.concat(cur.value);

  return acc.concat(
    cur.data.map((nested) => {
        return nested.value;
    })
  )
}, []);

console.log(results)

https://jsfiddle.net/avLvxsb6/

正如您在结果中看到的，您拥有数组和嵌套数组中的所有值。另一种选择是映射数据，然后展平结果，这样就没有嵌套数组。然后循环并渲染