Question

我有一个React组件，它显示一个链接：

Magic.tsx：

const { message } = this.props;
<Link to={ { pathname: HOGWARTS, state: { message } } }>
  Go to Page
</Link>

我正在将此Magic组件作为Prop传递给另一个具有动态message状态的组件，在该组件上进行迭代

Parent.tsx

const CustomComp = this.props.Magic;
const content = messageArray.map(msg => <CustomComp message={ msg } />)
{ content } //Render all the Links with message state

这将正确呈现链接。但是，当我单击链接并调试HOGWARTS页面时，location.state是未定义的。如果返回上一页，然后再次单击，则location.state正确，具有message数据。因此，在某种程度上它不适用于页面加载，但是在第二次单击后，它可以正常工作。

有人遇到过同样的问题吗？

注意：我已经使用<Link />检查了React Devtool标签，在侧边栏显示，此链接附加了message状态。 / p>

Answer 1

‘state’匹配'BrowserRouter'，'hash'匹配'HashRouter'，因此，如果您使用'HashRouter'匹配'hash'，则'state'必须是未定义

Answer 2

您只需要处理您的状态：{message}未定义的情况，如下所示，因为该状态仅在单击链接时可用

因此location.state在初始时未定义。

在您的Parent.tsx中

你可以做这样的事..

const message =
            (this.props.location.state && this.props.location.state.message) != undefined
                ? this.props.location.state.message
                : " ";

然后使用它

const content = messageArray.map(msg => <CustomComp message={ msg } />)

这应该可以帮助您.. :)

反应：页面加载后第一次导航时，location.state是未定义的

2 个答案: