我对使用 Contentful 及其引用(许多)字段类型还很陌生。我有一种引用类型,它包含许多产品名称。在 GraphQL 中,我可以看到我所有的产品名称都在显示,但是当我尝试在 Gatsby 上渲染它时,我没有看到任何显示(产品名称:数组)。这是我的 GraphQL
{
allContentfulAppetizerMenuSection {
nodes {
menuItemReferences {
productName
}
}
}
}
这是我的代码...
import React from 'react';
import { graphql, StaticQuery } from 'gatsby';
const Products = () => (
<StaticQuery
query={graphql`
query MyQuery {
allContentfulAppetizerMenuSection {
nodes {
menuItemReferences {
productName
}
}
}
}
`}
render={data => (
<div>
{data.allContentfulAppetizerMenuSection.nodes.map(({ menuItemReferences }, i) => (
<div key={i}>
{menuItemReferences.productName}
</div>
))}
</div>
)}
/>
)
export default Products;
任何帮助将不胜感激。
最佳答案
尝试:
const Products = () => {
const data = useStaticQuery(graphql`
query {
allContentfulAppetizerMenuSection {
nodes {
menuItemReferences {
productName
}
}
}
}
`);
return <div>
{data.allContentfulAppetizerMenuSection.nodes.map(({ menuItemReferences }, i) => {
return <div key={i}>
{menuItemReferences.productName}
</div>;
})}
</div>;
};
export default Products;
注意 useStaticQuery
的用法钩子(Hook)和循环中的 return
语句。
useStaticQuery
的重构产生了更清晰和可重用的代码,但它的想法完全相同,如果您更熟悉旧的 StaticQuery,则可以保留它。
如果错误仍然存在,请尝试在循环内进行调试。
关于graphql - 在 Gatsby 上渲染 Contentful Reference (many) 数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64490137/