I have a React component, which display a Link:(我有一个React组件,它显示一个链接:)
Magic.tsx:(Magic.tsx:)
const { message } = this.props;
<Link to={ { pathname: HOGWARTS, state: { message } } }>
Go to Page
</Link>
I am passing this Magic
Component as a Prop to another component, where I am iterating over it, with Dynamic message
state(我正在将该Magic
组件作为Prop传递给另一个组件,在其中我以动态message
状态对其进行迭代)
Parent.tsx(Parent.tsx)
const CustomComp = this.props.Magic;
const content = messageArray.map(msg => <CustomComp message={ msg } />)
{ content } //Render all the Links with message state
This is rendering the Link correctly.(这将正确呈现链接。) But when I click on the Link and debug the HOGWARTS
page, the location.state is undefined.(但是,当我单击链接并调试HOGWARTS
页面时,location.state是未定义的。) If go back to previous page, and click again, the location.state is correct, having message
data.(如果返回上一页,然后再次单击,则location.state正确,包含message
数据。) So somehow it's not working on page load, but after clicking on second time, it works.(因此,它不能以某种方式在页面加载中工作,但是在第二次单击后,它可以工作。)
Did anyone faced the same issue?(有人遇到过同样的问题吗?)
Note: I've inspected the <Link />
tag using React Devtool
, on sidebar it shows that, what message
state is attached to this link.(注意:我已经使用React Devtool
检查了<Link />
标签,在侧边栏显示了该链接附加了什么message
状态。)
ask by Rahul Sagore translate from so
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…