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

Posted 2023-02-22

【中文标题】如何通过 React 中的嵌套对象数组进行映射

【英文标题】：How to map through nested array of objects in 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（这是一个字符串）

【参考方案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。