当我state与gatsby组件一起使用Link时，当我进行测试gatsby develop但由于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
什么undefined是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
基本上，通过销毁，您可以简化工作。这是您在中使用的({ location })。默认情况下，props它们通过React中的页面和组件传递，因此({ location })等于(props)和然后props.location。这只是输入对象的嵌套属性的一种方法。
同样，一旦拥有props.location（或location在中进行了重组props），您可以：
const { state = {} } = location //equals to location.state
在上述情况下，您正在破坏结构，{}如果中没有state嵌套对象，则将默认值设置为empty（）location。
以相同的方式：
const { info } = state //equals to state.info
如果state由于先前的破坏而为空，则info也将为空，如果不是，则其值为state.info。因此，您的return方法可以是布尔条件，例如：
return info ? (
<div>{info}</div>
) : (
<div>Other content</div>
)
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句