location.state 因 gatsby 构建而失败

Question

当我将state与 gatsby 组件Link一起使用时，当我使用gatsby develop development 进行测试但由于gatsby build失败并出现有关undefined内容的错误时，该链接工作。 终端显示的错误消息是WebpackError: TypeError: Cannot read property 'info' of undefined我尝试通过两种不同的方式检查undefined但这是行不通的。 我不知道我必须做什么来解决这个问题。 第一次测试：

if (!location.state.info) {
    return null
} else

第二次测试

if (typeof location.state.info === `undefined`) {
  return null
} else

索引页

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"

const IndexPage = () => (
  <Layout>
    <Link to="/page_test/" state={{ info: "test" }}>
      Test
    </Link>
  </Layout>
)

export default IndexPage

页

import React from "react"
import { Link } from "gatsby"

const TestPage = ({ location }) => {
  return <div>{location.state.info}</div>
}

export default TestPage

Answer 1

undefined的是location.state ，而不是info state 本身。 改变你的条件你的代码应该可以工作。

if (typeof location.state === `undefined`) {}

这是使用解构的一些方法（相同的想法）：

const TestPage = ({ location }) => {
  const { state = {} } = location
  const { info } = state

  return info ? (
    <div>{info}</div>
  ) : (
    <div>Other content</div>
  )
}

export default TestPage

基本上，通过解构，你正在简化东西。 这就是您在({ location })中使用的内容。 默认情况下， props在 React 中通过页面和组件传递，因此({ location })等于(props) ，然后props.location 。 这只是输入 object 的嵌套属性的一种方式。

同样的，一旦你有了props.location （或者location如果在props中解构），你可以：

 const { state = {} } = location //equals to location.state

在上述情况下，如果在location中没有state嵌套 object ，则您正在解构并将默认值设置为空（ {} ）。

以同样的方式：

  const { info } = state //equals to state.info

如果state由于之前的解构而为空，则 info 也将为空，否则将采用state.info的值。 因此，您的返回方法可以是 boolean 条件，例如：

  return info ? (
    <div>{info}</div>
  ) : (
    <div>Other content</div>
  )