graphql查询未呈现到页面

Posted 2023-03-08

【中文标题】graphql查询未呈现到页面

【英文标题】：graphql query not rendering to page

【发布时间】：2021-10-13 10:16:30

【问题描述】：

    console.log(data.allShopifyProductVariant.nodes[0].product.title)

    return (
        <div>
            <div>
                data.allShopifyProductVariant.nodes.map(node => 
                    <div>
                        node.product.title
                    </div>
                
                )
            </div>
        </div>
    )



export const query = graphql`
    query CollectionQuery 
        allShopifyProductVariant(filter: product: productType: in: "20 lb. Plotter Paper") 
            nodes 
              compareAtPrice
              sku
              price
              product 
                title
                images 
                  gatsbyImageData(width: 150)
                
                productType
              
            
          
    `

export default Collection;

期待这个函数返回产品标题，由于某种原因它什么也不返回。我尝试过使用危险设置的 innerhtml ，但没有任何反应，没有错误。我可以 console.log node.product.title 它返回我想要显示的内容，但由于某种原因它没有呈现到 div。任何帮助表示赞赏，在此先感谢：D

【参考方案1】：

您缺少return 声明：

return (
    <div>
        <div>
            data.allShopifyProductVariant.nodes.map(node => 
                return <div>
                    node.product.title
                </div>
            
            )
        </div>
    </div>
)

或者使用隐含的return：

return (
    <div>
        <div>
            data.allShopifyProductVariant.nodes.map(node => (
               <div>
                    node.product.title
                </div>
            
            ))
        </div>
    </div>
)