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的组合执行您需要执行的操作。这是一个虚拟数据的例子，你将它转移到反应。

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/

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

在dropdown

1 个答案: