如何通过 React 中的嵌套对象数组进行映射答案

【问题标题】：How to map through nested array of objects in React如何通过 React 中的嵌套对象数组进行映射
【发布时间】：2019-09-26 08:25:04
【问题描述】：

我正在尝试通过一个数组进行映射，并且对于每个键，通过对象的嵌套数组进行映射以打印出分组值。

我不断收到 .map() 不是我的嵌套数组的函数。

我已经为对象尝试了 Object.Keys，为数组尝试了 map()，但我似乎无法正确打印任何内容。

分组数组

{Airport: Array(1), Motorway: Array(2), Other: Array(2), Train: Array(2), Subway: Array(1)}

嵌套数组

 Airport: Array(1)
  0: {Station: "Airport", Description: "This is a description for the Airport", …}

 Motorway: (2) [{…}, {…}]

尝试打印映射结果：

 return (
    <Wrapper>
        {Object.keys(list).map((key) => {
            key.map((station) => {
                console.log(station);
            })
        })}
    </Wrapper>
)

我认为由于父对象是一个对象，而子对象是数组，所以对象键然后 map 函数可以工作，但它会抛出 .map() is not a function 错误。任何帮助将不胜感激。

【问题讨论】：

提示：第二张地图应该在list[key] 而不是key（这是一个字符串）

标签： arrays reactjs object ecmascript-6 mapping

【解决方案1】：

这不起作用的原因是因为您试图在key 中执行.map。 key 只是一个字符串。

您应该在list[key] 上进行映射，这就是数组

    {Object.keys(list).map((key) => {
        return list[key].map((station) => {
            console.log(station);
            // you should return something here
        })
    })}

您可以做的另一件事是循环遍历这些值。

    {Object.values(list).map((value) => {
        return value.map((station) => {
            console.log(station);
            // you should return something here
        })
    })}

这样values就是你想要的数组，你可以使用.map。

【讨论】：