Gatsby 在开发过程中工作正常，但在构建过程中抛出错误答案

【问题标题】：Gatsby works fine during development but throws error during buildGatsby 在开发过程中工作正常，但在构建过程中抛出错误
【发布时间】：2019-03-11 06:47:11
【问题描述】：

我在 gatsby 中将数据从一个页面传递到另一个页面。第一页代码：

let state = {book: book, src: src}
return (
<div className="book__holder">
    <Link to="/pdf/" state={state}>
    <Card
        hoverable
        style={{ width: 240 }}
        cover={<img alt={book} 
                    src={url}
                    />}
        >
        <Meta
            title={book}
            description={faculty+" "+year+"-"+part}
        />
    </Card> 
    </Link> 
</div>

此数据在 pdf 页面中用作：

const PDFPage = props =>{
    return (
      <React.Fragment>
       <SEO title={props.location.state.book} />
       <NavBar></NavBar>
       <Embed src={props.location.state.src} type="application/pdf">
       </Embed>

     </React.Fragment>
    )}

export default PDFPage

使用 gatsby develop 时一切正常，但是当我使用 gatsby build 时，它会引发以下错误：

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://gatsby.app    
/debug-html

  11 |   return (
  12 |   <React.Fragment>
> 13 |     <SEO title={props.location.state.book} keywords={[`gatsby`,  
           `application`, `react`]} />
     |                                      ^
  14 |     <NavBar></NavBar>
  15 |     <Embed src={props.location.state.src} type="application/pdf">    
           </Embed>
  16 | 


       WebpackError: TypeError: Cannot read property 'book' of undefined

        - pdf.js:13 PDFPage
         lib/src/pages/pdf.js:13:38

谁能帮帮我？

【问题讨论】：

您的state 未定义。请检查您是否在路线中正确传递状态。
正如我上面所说，当我使用 gastby 开发时，一切正常。 PDF 正确加载，状态已设置。但是当我运行 gatsby 时会出现构建错误。

标签： javascript reactjs gatsby

【解决方案1】：

Gatsby 将在生产构建期间抛出错误，因为在服务器端渲染期间位置不可用。

确保构建不会引发错误的一种方法是：

检查componentDidMount中的窗口
将 location 属性映射到 state
从你的状态而不是直接从道具渲染值

在componentDidMount()中

componentDidMount() {
  if (typeof window === 'undefined') {
    return;
  }
  this.setState(() => ({ playerName: this.props.location.state.playerName }));
}

在渲染（）中

render() {
  return <div>{this.state.playerName}</div>;
}

感谢这个帖子，How to get previous url in react gatsby

【讨论】：

【解决方案2】：

有时您希望将数据从源页面传递到链接页面。您可以通过将 state 属性传递给 Link 组件来做到这一点...链接页面将有一个 location 属性，其中包含一个嵌套的 state 对象结构，其中包含传递的数据。

Passing Props to Link targets

虽然下面的演示实际上并没有使用 gatsby，但它使用的是到达路由器（而 gatsby 在引擎盖下使用到达路由器）。

import React from "react";
import { render } from "react-dom";
import { Router, Link } from "@reach/router";

const App = () => {
  let state = {
    name: 'Ron',
    book: {
      title: 'Harry Potter and the Deathly Hallows', 
      author: 'J. K. Rowling', 
      progress: '80%'
    }
  }

  return (
  <div>
    <h1>App</h1>
    <nav>
      <Link to="/" state={state}>Home</Link>{" "}
      <Link to="dashboard" state={state} >Dashboard</Link>
    </nav>

    <Router>
      <Home path="/" />
      <Dashboard path="/dashboard" />
    </Router>
  </div>
)};

const Home = ({location}) => (
  <div>
    <h2>Welcome { location.state.name }</h2>
    <p></p>
  </div>
);

const Dashboard = ({location}) => (
  <div>
    <h2>Dashboard</h2>
    <p>Hi { location.state.name }.</p>
    <p>You have read { location.state.book.progress } of { location.state.book.title } by { location.state.book.author }.</p>
  </div>
);

render(<App />, document.getElementById("root"));

Stackblitz

【讨论】：