javascript - 如何在 React 中映射嵌套的对象数组

Question

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

我不断收到 .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() is not a function 错误。任何帮助将不胜感激。

Answer 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。