Question

绞尽脑汁好几天了，没有再进一步。

我有一个使用 MERN 堆栈的项目，我正在尝试从我的数据库访问嵌套数组。

这是我的数据结构：

const Products = [
    {
        name: 'Air Zoom Pegasus 37',
        brand: 'Nike',
        category: 'running',
        material: 'Textile & Synthetic Upper/Synthetic sole',
        description: 'Hit a new PB in these mens Air Zoom Pegasus 37 trainers from Nike. In an Off Noir colourway with hits of Blue Fury and Bright Crimson, these runners have lightweight mesh upper for a breathable feel. They feature a secure lace up fastening and are sat on a soft foam midsole for long-lasting cushioning and maximum responsiveness. With Nikes Air Zoom unit at the forefront for a smooth ride, these trainers are finished with a grippy rubber tread and the iconic Swoosh logo to the sidewalls.',
        price: 105,
        sizes: [
            { size: '6', countInStock: 10 },
            { size: '7', countInStock: 10 },
            { size: '8', countInStock: 10 },
            { size: '9', countInStock: 10 },
            { size: '10', countInStock: 10 },
            { size: '11', countInStock: 10 },
            { size: '12', countInStock: 10 }
        ],

        image1: '/images/nike_pegasus37_1.jpeg',

        image2: '/images/nike_pegasus37_2.jpeg',

        image3: '/images/nike_pegasus37_3.jpeg',

        image4: '/images/nike_pegasus37_4.jpeg',

        image5: '/images/nike_pegasus37_5.jpeg',

        image6: '/images/nike_pegasus37_6.jpeg',

        rating: 0,
        numReviews: 0,
        tags: 'nike, adidas, running, trainers, 5k, new, style',
    },
]

我似乎无法访问 'Sizes' 数组中的嵌套对象。所有属性都在使用 Redux 的状态下返回，我可以看到数据负载从 Chrome 上的 Redux Devtools 中返回此 BSON 列表中的所有项目。

我正在使用 Axios 从 MongoDB 集合中检索此数据，并使用 Redux 使用调度和选择器来管理我的状态。其他一切都有效。我可以获取所有其他信息，所以我知道这不是后端问题，但我似乎无法弄清楚如何映射该数组。

任何帮助将不胜感激。

谢谢，利亚姆。

Answer 1

要在反应中映射数组，您可以这样做

Component start......

    return {
        <div>
            {
                // First map over your Products
                // note the ? is there to prevent it from crashing if Products is not defined
                Products?.map(product => {
                   return <>
                        <p>{product.name}</p>
 
                        //then map over this products sizes
                        <div>
                             
                             {product?.sizes.map(size => {
                                 return <p>{size.size} - {size.countInStock}</p>
                             })}
                        </div>
                    </>
                })
            }
        </div>
    }

从 MongoDB 集合访问嵌套数组

1 个答案: