Question

我要在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开发时，一切都很好，但是当我使用 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

有人可以帮我吗？

Answer 1

有时您需要将数据从源页面传递到链接页面。您可以通过将状态属性传递给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

Answer 2

由于服务器端渲染期间位置不可用，因此Gatsby将在生产构建期间引发错误。

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

检查componentDidMount中的窗口
将位置道具映射到状态
从您的州而不是直接从道具中获得价值

在componentDidMount（）

中

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

在render（）

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

此线程的积分，How to get previous url in react gatsby

Gatsby在开发过程中工作正常，但在构建过程中引发错误

2 个答案: