无法访问 Gatsby 页面查询中的对象数据
Cannot access object data in Gatsby page query
我正在为网站使用 Prismic 和 Gatsby,但在使用页面模板时遇到了问题。 graphql 查询有效,但我无法访问数据对象中的项目。
我的模板是这样设置的:
const ContactPage = ({ data: prismicContactPage }) => {
const { data } = prismicContactPage;
console.log(prismicContactPage); // logs the object and all its data
console.log(data); // undefined
return (
<Layout>
<SEO key="contact-seo" title="" />
<PageBody>
{data.title.text} // data is undefined
{prismicContactPage.data.title.text} // prismicContactPage.data is undefined
</PageBody>
</Layout>
);
};
export default ContactPage;
export const pageQuery = graphql`
query ContactQuery {
prismicContactPage {
data {
title {
text
}
}
}
}
`;
我可以记录查询对象并且所有正确的信息都存在,但出于某种原因我无法获取对象中的数据。
如果我将组件更改为:
const ContactPage = ({ data: {prismicContactPage: data} }) => {
console.log(data); // logs correct info
return (
<Layout>
<SEO key="contact-seo" title="" />
<PageBody>
{data.title.text} // undefined
</PageBody>
</Layout>
);
};
我可以将 'further' 放入对象中,但使用 data.title.text
最终得到 TypeError: data.title is undefined
删除缓存和重建查询似乎没有帮助,当我使用 graphql 资源管理器时,我的 graphql 查询没有问题。我希望我遗漏了一些基本的东西,但我终究无法找出问题所在。
有了这个查询
export const pageQuery = graphql`
query ContactQuery {
prismicContactPage {
data {
title {
text
}
}
}
}
`;
我希望数据像这样传递到我的组件中:
props.data.prismicContactPage.data.title.text
也许您打算像这样提取数据?
// extract props.data.prismicContactPage
const ContactPage = ({ data: { prismicContactPage } }) => {
console.log(prismicContactPage.data.title.text)
return ...
}
或
// extract props.data.prismicContactPage.data
const ContactPage = ({ data: { prismicContactPage: { data } } }) => {
console.log(data.title.text)
return ...
}
写成({ data: prismicContactPage }) => ...
就相当于
const prismicContactPage = this.props.data`;
const { data } = prismicContactPage; // undefined because there's no this.props.data.data
而({ data: {prismicContactPage: data} }) => ...
等同于
const data = this.props.data.prismicContactPage;
console.log(data.title.text) // undefined because there's no this.props.data.prismicContactPage.title.text
我认为两者都不是您预期的data
。
我正在为网站使用 Prismic 和 Gatsby,但在使用页面模板时遇到了问题。 graphql 查询有效,但我无法访问数据对象中的项目。
我的模板是这样设置的:
const ContactPage = ({ data: prismicContactPage }) => {
const { data } = prismicContactPage;
console.log(prismicContactPage); // logs the object and all its data
console.log(data); // undefined
return (
<Layout>
<SEO key="contact-seo" title="" />
<PageBody>
{data.title.text} // data is undefined
{prismicContactPage.data.title.text} // prismicContactPage.data is undefined
</PageBody>
</Layout>
);
};
export default ContactPage;
export const pageQuery = graphql`
query ContactQuery {
prismicContactPage {
data {
title {
text
}
}
}
}
`;
我可以记录查询对象并且所有正确的信息都存在,但出于某种原因我无法获取对象中的数据。
如果我将组件更改为:
const ContactPage = ({ data: {prismicContactPage: data} }) => {
console.log(data); // logs correct info
return (
<Layout>
<SEO key="contact-seo" title="" />
<PageBody>
{data.title.text} // undefined
</PageBody>
</Layout>
);
};
我可以将 'further' 放入对象中,但使用 data.title.text
最终得到 TypeError: data.title is undefined
删除缓存和重建查询似乎没有帮助,当我使用 graphql 资源管理器时,我的 graphql 查询没有问题。我希望我遗漏了一些基本的东西,但我终究无法找出问题所在。
有了这个查询
export const pageQuery = graphql`
query ContactQuery {
prismicContactPage {
data {
title {
text
}
}
}
}
`;
我希望数据像这样传递到我的组件中:
props.data.prismicContactPage.data.title.text
也许您打算像这样提取数据?
// extract props.data.prismicContactPage
const ContactPage = ({ data: { prismicContactPage } }) => {
console.log(prismicContactPage.data.title.text)
return ...
}
或
// extract props.data.prismicContactPage.data
const ContactPage = ({ data: { prismicContactPage: { data } } }) => {
console.log(data.title.text)
return ...
}
写成({ data: prismicContactPage }) => ...
就相当于
const prismicContactPage = this.props.data`;
const { data } = prismicContactPage; // undefined because there's no this.props.data.data
而({ data: {prismicContactPage: data} }) => ...
等同于
const data = this.props.data.prismicContactPage;
console.log(data.title.text) // undefined because there's no this.props.data.prismicContactPage.title.text
我认为两者都不是您预期的data
。