1

我正在为一个网站使用 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>
  );
};

我可以“进一步”进入对象，但data.title.text最终使用TypeError: data.title is undefined

删除缓存和重建查询似乎没有帮助，当我使用 graphql explorer 时，我的 graphql 查询没有问题。我希望我错过了一些基本的东西，但我无法终生找出问题所在。

4

1 回答 1

2

有了这个查询

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你所期望的。

于 2019-01-29T08:07:38.513 回答