javascript - 使用列表映射中的数据创建组件列表

Question

我有以下结构的地图。

const myMap = {
    "title1" : [
        {
            "id" : "1",
            "name" : "n1"
        },
                {
            "id" : "2",
            "name" : "n2"
        }
    ],
    "title2" : [
        {
            "id" : "3",
            "name" : "n3"
        },
                {
            "id" : "4",
            "name" : "n4"
        }
    ] 
}

我试图在上面的地图上运行并获得如下组件列表。

[
    [
        <MyComponent props={props}/>,
        <MyComponent props={props}/>
    ],
        [
        <MyComponent props={props}/>,
        <MyComponent props={props}/>
    ]
]

我怎样才能做到这一点？请在我的尝试中参考下面的代码。
不断收到以下错误。

错误！无法读取未定义的属性“地图”

我尝试映射和创建组件列表。
仅供参考，MainComponent 接受 body 键下的列表列表，如下所示：

<div>
    {myMap && <MainComponent
        data={{
        body: Object.keys(myMap).map((key) => {
            const categoryArray = myMap[key];
            categoryArray.forEach(category => {
            return {
                content: <div>
                <MyComponent
                    data={{
                        id: category.id,
                        title: category.name,
                        image: {
                            href:`https://domain${category.img}`,
                            alt: category.name,
                        },
                    }}
                />,
                </div>,
            }
            })
        })
        }}
    />}
</div>

标签： javascriptreactjs