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

【问题标题】：Can't render a nested object from an array with Apollo and ReactJS无法使用 Apollo 和 ReactJS 从数组中渲染嵌套对象
【发布时间】：2022-12-06 01:51:12
【问题描述】：

(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>
})}

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您的变量中有一个额外的 .products（在 html 中）。

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

【讨论】：

【解决方案2】：

如果你的意思是每个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>
            })}

【讨论】：