javascript - 在列表列表中向下弯曲嵌套对象

Question

我正在循环来自休息呼叫的数据。寻找一种能够
在其自己的部分内灵活调整数据而不挤压在一起或流入下一个块的方法。
请参阅下面的图片进行说明。

这是我目前拥有的，它在下面的第一张图片中产生输出。
导管和选择器是组件，我无权修改它们。

<div>
    (
    <Conduit
        data={{
        // this mapping is the overall consisting of all squares in each rows 
        // This body takes in a list of lists
        body: Object.keys(restData).map((key) => {

            const sampleArray = restData[key];
            
            
            // this portion is squares per row (sometimes 3, sometimes more or less)
            return sampleArray.map(sample => ({
            content:
                // This div portion forms each square in image below
                <div style={{maxWidth: 300}}>
                    <Selector name={sample.name}/>
                </div>
            }));
            
            
        }),
        }}
    />
    )}
</div>

如果连续有 3 个以上的项目，我正在尝试控制以下部分以使其能够向下弯曲。
尝试在此部分周围放置一个 div 并按如下方式对其进行调整，但最终出现以下错误。

我在下面尝试的当前错误。

Error!row.map is not a function

有没有解决的办法？请参考下面的图片，看看我想要实现的目标。

当前尝试

return <div style={{display: 'flex', flexWrap: 'wrap', alignContent: 'flex-start'}}> {
    // this portion is squares per row (sometimes 3 sometimes more)
    sampleArray.map(sample => ({
    content:
    // This div portion forms each square in image below
        <div style={{maxWidth: 300}}>
            <Selector name={sample.name}/>
        </div>
    }))
} </div>;

这是restData结构

{
    "key1": [
        {
            "name": "name1"
        },
        {
            "name": "name2"
        },
        {
            "name": "name3"
        },
        {
            "name": "name4"
        },
    ],
    "key1": [
        {
            "name": "name5"
        },
        {
            "name": "name6"
        },
        {
            "name": "name7"
        },
        {
            "name": "name8"
        },
    ]
}

这是当前的输出。

这就是我想要达到的目标。
背景颜色只是为了表明当我向下弯曲时它仍然保持在同一个列表中。

标签： javascriptcssreactjs