无法使用 Apollo 和 ReactJS 从数组中渲染嵌套对象

Question

(https://i.stack.imgur.com/8sdxs.png)

正在尝试获取要在页面上呈现的嵌套数据products.name。我试过这样做，但它没有呈现任何东西，我想得到产品的名称和id。。。但它是嵌套数组。我确信这是一些语法问题，提前感谢

{data && data.categories.products?.map((product) => {
return <div>
<h1>Name : {product.products.name}</h1>
<h3>ID :{product.products.id} </h3>  
</div>
})}

Answer 1

如果您想单独呈现每个类别的产品

{data?.categories?.map((cat, catIdx) => {
return (
<div key={catIdx}>
<span>Category Name<span>
{
cat.products?.map((product) => {

// if gallery is array of object, then use the property
// const imageSrc = product.gallery[0]?.src
// if gallery is array of string
const imageSrc = product.gallery[0]
return (
<div key={product.id}>
<h1>Name : {product.name}</h1>
<h3>ID :{product.id} </h3>  
<img src={imageSrc} alt={`product image for ${product.name}`} />
</div>
)
})
}
</div>
)
})}

如果您想展示特定类别的产品

const categoryIndex = 0;
{data?.categories[categoryIndex]?.map((cat, catIdx) => {
return (
<div key={catIdx}>
<span>Category Name<span>
{
cat.products?.map((product) => {
return (
<div key={product.id}>
<h1>Name : {product.name}</h1>
<h3>ID :{product.id} </h3>  
</div>
)
})
}
</div>
)
})}

如果你想所有的产品

// use useMemo if performance is an issue
const allProducts = data?.categories?.reduce((acc, curr) => {
return [ ...acc, ...(curr.products ?? []) ]
}, [])
{
allProducts?.map((product) => {
/ if gallery is array of object, then use the property
// const imageSrc = product.gallery[0]?.src
// if gallery is array of string
const imageSrc = product.gallery[0]
return (
<div key={product.id}>
<h1>Name : {product.name}</h1>
<h3>ID :{product.id} </h3>  
<img src={imageSrc} alt={`product image for ${product.name}`} />
</div>
)
})
}

希望它能帮助

Answer 2

在变量中(在html中)有一个额外的.products。

{data && data.categories.products?.map((product) => {
return <div>
<h1>Name : {product.name}</h1>
<h3>ID :{product.id} </h3>  
</div>
})}

Answer 3

如果你的意思是每个product都有一个带有products数组的属性，你需要通过products数组再次循环，这样你就会有两个嵌套的map。

{data && data.catergories.products?.map((product) => {
return <div>
{ product.products && product.products.map(subProducts => (<h1>Name : {subProducts.name}</h1>
<h3>ID :{subProducts .id} </h3>  ))
</div>
})}