Javascript location.state在盖茨比构建中失败

当我将

状态

与盖茨比组件

链接

一起使用时，当我使用

盖茨比开发

进行测试时，该链接起作用，但使用

盖茨比构建

失败，错误为

未定义

内容。终端显示的错误消息是

webpackeror:TypeError:cannotreadproperty'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

从“React”导入React
从“盖茨比”导入{Link}
从“./组件/布局”导入布局
常量索引页=（）=>(
试验
)
导出默认索引扩展

页面

从“React”导入React
从“盖茨比”导入{Link}
常量TestPage=（{location}）=>{
返回{location.state.info}
}
导出默认测试页
未定义的
是
位置。状态
，而不是
信息
状态本身。更改您的条件您的代码应该可以工作

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

在上面的例子中，如果
位置
中没有
状态
嵌套对象，则您正在解构并将默认值设置为空（
{}
）

同样地：

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

如果由于上一次解构而
state
为空，则信息也将为空，如果不是，则将采用
state.info
的值。因此，返回方法可以是布尔条件，例如：

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

退货信息？(
{info}
) : (
其他内容
)
错误消息意味着
location.state
为“未定义”，而不是
location.state.info
。请提供一个例子。@str谢谢你这么说，我不测试好的元素：）现在这很好。为了了解更多信息，我试着简短地举一个例子。。。我无法想象一个更简单的！！！比如说@str，我这样写代码，现在这就是工作
const TestPage=（{location}）=>{if（！location.state）{return null}else{return{location.state.info}}}
是的，这与使用解构的方法完全相同；）Whouuu、javaScript、React和Gatsby非常庞大，需要学习太多的方法。。。C++或C是比较简单的！！！的确我更新了问题，添加了一些解释。希望有帮助！
  const { info } = state //equals to state.info

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