html - graphql查询未呈现到页面

Question

    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

标签： htmlreactjsgraphqlgatsby

Answer 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>
)