Gatsby Link 传递道具错误访问目标页面上的道具答案

【问题标题】：Gatsby Link passing Props error accessing prop on destination pageGatsby Link 传递道具错误访问目标页面上的道具
【发布时间】：2021-09-30 14:17:44
【问题描述】：

我正在尝试将值传递给另一个页面以进行条件渲染，但我遇到了一个错误，我无法构建页面，因为它似乎位置欠精细。我到处都看了，无法解决任何问题，您可以提出任何建议。

原始页面（工作正常）：

import { Link } from 'gatsby'
import React, { useState, useEffect } from 'react'

const ProfilePayment = ({     
  return (              
<Link
   to={`/pay-on-line${search ? `?c=${search}` : ''}`}
   state={{ myProp: agentID }}>
)
})

export default ProfilePayment

在线支付页面 - 产生错误“位置”类型上不存在属性“状态”：

import React, { useState } from 'react'
import Layout from '../components/layout/layout'
import { useEffect } from 'react'
import { useNumbers } from '../components/NumbersProvider/NumbersProvider'
import { useQueryParam } from '../hooks/useQueryParam'

const PayOnline = () => {
return (
{console.log(location.state.myProp)}
)

export default PayOnline

【问题讨论】：

标签： reactjs typescript gatsby react-typescript

【解决方案1】：

这是试图访问window.location.state.myProp。由于在 SSR 期间location 不在全局范围内并且window 不可用，您可能会遇到location 是undefined 的问题。

无论哪种方式，您在这里所指的location (window.location) 可能没有state 属性，这意味着访问myProp 会在您尝试访问时引发错误undefined 的属性。

{console.log(location.state.myProp)}

您可能想要关注this example，解构location 属性并访问其上的state 属性：

const Photo = ({ location, photoId }) => {
  if (location.state.fromFeed) {
    return <FromFeedPhoto id={photoId} />
  } else {
    return <Photo id={photoId} />
  }
}

【讨论】：

尝试了这个并得到了错误：绑定元素'location'隐式具有'any'类型。我需要从第 1 页导出位置吗？
这听起来像是缺少 TypeScript 类型或被误解了。我没有在 Gatsby 中使用 TypeScript，所以我真的帮不了你。
啊，是的，它是类型脚本。谢谢你任何方式将进一步调查

【解决方案2】：

找到答案。回答将来遇到与 Gatsby、Typescript 类似问题以及在页面之间传递道具时无法使用 location.state 的任何人。

import React, { useState } from 'react'
import Layout from '../components/layout/layout'
import { useEffect } from 'react'
import { useNumbers } from '../components/NumbersProvider/NumbersProvider'
import { useQueryParam } from '../hooks/useQueryParam'

const PayOnline = ( { myProp }: any) => {
const agentProp = myProp
return (
{console.log(agentProp)}
)

export default PayOnline

对我有帮助的原创文章： Map typescript parameter: Binding element 'contacts' implicitly has an 'any' type.ts

【讨论】：