Question

我在使用gatsby构建的网站上使用棱柱形作为CMS。我需要先处理graphql查询返回的数据，然后再将其呈现在react组件中。该网站在开发人员中工作正常，但由于我使用的变量未在构建时定义，因此构建失败。

我尝试使用componentDidMount和等效的钩子来仅在安装时定义我的变量，但是没有用。我还尝试在挂载时将变量分配给组件的状态，但这也失败了。参见下面的代码，我尝试在其中编写一个简单的示例，以获得更好的主意：

import { graphql } from 'gatsby';

import Layout from "../components/layout"

export const data = graphql`
  query allData {
    allPrismicNews{
      edges {
        node {
          id
        }
      }
    }
  }
`;



class IndexPage extends Component {
    render() {
      return (
        <Layout>
            <p>{this.state.newsId ? this.state.newsId : null}</p>
        </Layout>
      );
    }
  componentDidMount() {
    if (typeof window === 'undefined') {
        return;
    }
    this.setState(() => ({ newsId: this.props.data.allPrismicNews.edges.map(article=>article.node.id).flat() }));    
    }
  }
  export default IndexPage;```

For this example, I expect to see the ids of the news output in the template, this works in development but not in production.

What am I doing wrong?

Answer 1

您可以做的是将newsId设置为初始状态，以使this.state.newsID永远不会被未定义：

class IndexPage extends Component {
  state = {
    newsId: null,
  }
  componentDidMount() {
    if (typeof window === "undefined") {
      return
    }
    this.setState({
      newsId: this.props.data.allPrismicNews.edges
        .map(article => article.node.id)
        .flat(),
    })
  }
  render() {
    return (
      <Layout>
        <p>{this.state.newsId ? this.state.newsId : null}</p>
      </Layout>
    )
  }
}

使用gatsbyjs将来自graphql查询的数据修改为react组件可在gatsby开发中使用，但会破坏gatsby构建

1 个答案: