Javascript Can'；t从数组对象获取值以渲染React组件

我正在努力完成我的学生项目，在这个项目中，我需要用艺术分类来呈现我的购物清单。有许多项具有不同的值

const [shopList, setShopList] = useState(
    [{
        PORTRET: [{
            img: "img/portret_2.jpg",
            dimention: "40x80",
            price: "170",
            category: "PORTRET",
            id: 1
        },
        {
            img: "img/portret_1.jpg",
            dimention: "80x100",
            price: "190",
            category: "PORTRET",
            id: 2
        },
        {
            img: "img/portret_3.jpg",
            dimention: "80x120",
            price: "220",
            category: "PORTRET",
            id: 3
        }]
    },
    {
        SQUARE: [{
            img: "img/square_1.jpg",
            dimention: "40x80",
            price: "180",
            category: "SQUARE",
            id: 4
        },
        {
            img: "img/square_5.jpg",
            dimention: "40x80",
            price: "180",
            category: "SQUARE",
            id: 5
        },
        {
            img: "img/square_3.jpg",
            dimention: "40x80",
            price: "180",
            category: "SQUARE",
            id: 6
        },
        {
            img: "img/square_2.jpg",
            dimention: "40x80",
            price: "180",
            category: "SQUARE",
            id: 7
        },
        {
            img: "img/square_4.jpg",
            dimention: "40x80",
            price: "180",
            category: "SQUARE",
            id: 8
        }]
    },
    {
        LANDSCAPE: [{
            img: "img/landscape_1.jpg",
            dimention: "75x110",
            price: "220",
            category: "LANDSCAPE",
            id: 9
        }]
    },
    {
        CLOCK: [{
            img: "img/circle_1.jpg",
            dimention: "⌀32",
            price: "170",
            category: "CLOCK",
            id: 10
        },
        {
            img: "img/circle_2.jpg",
            dimention: "⌀32",
            price: "170",
            category: "CLOCK",
            id: 11
        }]
    },
    {
        OTHER: [{
            img: "img/other_1.jpg",
            dimention: "-",
            price: "250",
            category: "OTHER",
            id: 12
        },
        {
            img: "img/other_2.jpg",
            dimention: "-",
            price: "250",
            category: "OTHER",
            id: 13
        },
        {
            img: "img/horse.jpg",
            dimention: "-",
            price: "250",
            category: "OTHER",
            id: 14
        },
        {
            img: "img/tattoo.jpg",
            dimention: "-",
            price: "250",
            category: "OTHER",
            id: 15
        }]
    }
    ]
);

我制作了一个react组件，其中渲染项目类别和内部必须给我一个可用艺术的列表

const ShopList = ({ shopList }) => {
return (
    <div className="Section">
        {shopList.map((cat) => {
            return (Object.keys(cat).map((item) => {
                return (<div>
                    {console.log(item)}
                    <h3>{item.category}</h3>
                    <div className="bg-line"></div>
                    <div className="List-section" >
                        <div className="card" key={item.id}>
                            <div>
                                <img src={item.img} alt="" />
                                <div className="card-body">
                                    <h4 className="card-text">{item.dimention}cm</h4>
                                    <button type="button" name="button">{item.price}€</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>)
            }
            ))
        })
        }
    </div>
)

我认为我的问题出在map函数内部，但我不知道如何获取嵌套对象并在其中渲染值

添加问题

映射类别的两种解决方案都是可行的

但我没有得到预期的正确结果。每次从嵌套类别中获取一个值并将其推到一列中时，看起来都是渲染

解决方案

多亏了@buzatto和@Aron，我得到了想要的结果。下面的代码与React组件连接

const ShopList = ({ shopList }) => {
return (
    <div >
        {shopList.map(cat => {return Object.entries(cat).map(([category, items]) => {return (
                    <div className="Section">
                        <h3>{category}</h3>
                        <div className="bg-line" />
                        <div className="List-section">
                            {items.map(item => (
                                <div className="card" key={item.id}>
                                    <div>
                                        <img src={item.img} alt="" />
                                        <div className="card-body">
                                            <h4 className="card-text">{item.dimention}</h4>
                                            <button type="button" name="button">{item.price}€</button>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                );
            });
        })}
    </div>
);

const ShopList=（{ShopList}）=>{
返回(
{shopList.map（cat=>{return Object.entries（cat.map）（[category，items]）=>{return(
{类别}
{items.map（item=>(
{item.dimension}
{项目价格}€
))}
);
});
})}
);

})

您的

对象。键（cat）

将返回，例如，对于第一个cat

['PORTRET']

。您需要的是值，而不是该对象的键。你应该使用。它将返回一个包含所有值的数组。每个对象只有一个键和值，因此必须访问索引0：

 return (Object.values(cat)[0].map((item) => {

您可以使用，它返回一个

[键，值]

对数组

const ShopList=（{ShopList}）=>{
返回(
{shopList.map（（cat）=>
//你这里没有具体的问题。你可能想阅读这篇文章来改进你的问题：这是可行的，但我有一个错误。它与每个项目分开呈现，而不是按类别过滤。你想把项目分组在某种卡片中，其类别作为标题显示一次，而不是为每个项目显示一次吗？也许你可以添加y我们对这个问题的期望结果。你的意思是这样吗？是的，这就是我需要的。非常感谢。现在我只需要更改我的css使它看起来干净
 return (Object.values(cat)[0].map((item) => {