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

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