在 GatsbyJS 中，当将 props 传递给链接页面时，如何设置 defaultProp?

Question

当"链接页面"刷新 (f5) 或页面作为直接流量访问时，我遇到了TypeError: Cannot read property 'serviceCategory' of null问题。

我试过设置默认道具，但它没有触发。

这是我目前的设置：

<Link
to="/locations"
state={{
serviceCategory: "FILTER",
}}
>

链接页面

const Locations = ({ location }) => {
const { state = {} } = location
const { serviceCategory } = state
const [category, setCategory] = useState(() => {
return location.state === null ? "ALL" : serviceCategory
})
}
...
Locations.defaultProps = {
location: {
state: {
serviceCategory: "ALL",
},
},
}
export default Locations

defaultProps在盖茨比的文档中找不到，所以我正在考虑一个不同的解决方案。

Answer 1

在这种情况下，defaultProps不起作用，因为盖茨比在内部使用@reach/router，并且props.location值被覆盖。

您可以在defaultProps中使用不同的变量名称，也可以使用 state 的默认值。

const state = location.state || { serviceCategory: 'ALL' }

请注意

const { state = {serviceCategory:'ALL'} } = location

不起作用，因为解构中的默认初始值设定项仅适用于undefined值，而不适用于null值。在这种情况下，您的值为空。