Javascript 无法使用链接组件传递状态。为什么状态是未定义的?
我正在尝试学习“react router”,我正在开发一个应用程序,该应用程序有一个输入字段,可以为您提供一个下拉列表,其中包含指向欧洲各种火车站的链接,当您单击该链接时,它将呈现一个组件,在本例中为车站组件,并显示有关车站的更多详细信息 对于这个应用程序,我必须对外部API进行两次调用。第一个是找到火车站并在下拉列表中显示它们。这是可行的,从那里我可以得到站点的名称并将其放在下拉列表中,我还可以得到一个id,用于查询第二个API以获得站点的详细信息。当用户单击下拉列表中的站点时,会发生这种情况。现在就可以了。我的问题是,当用户单击下拉列表中的站点时,我已经丢失了站点的名称。我想以某种方式把它传给电台的节目组 这是我的站点组件:Javascript 无法使用链接组件传递状态。为什么状态是未定义的?,javascript,reactjs,react-router,react-router-v4,react-router-dom,Javascript,Reactjs,React Router,React Router V4,React Router Dom,我正在尝试学习“react router”,我正在开发一个应用程序,该应用程序有一个输入字段,可以为您提供一个下拉列表,其中包含指向欧洲各种火车站的链接,当您单击该链接时,它将呈现一个组件,在本例中为车站组件,并显示有关车站的更多详细信息 对于这个应用程序,我必须对外部API进行两次调用。第一个是找到火车站并在下拉列表中显示它们。这是可行的,从那里我可以得到站点的名称并将其放在下拉列表中,我还可以得到一个id,用于查询第二个API以获得站点的详细信息。当用户单击下拉列表中的站点时,会发生这种情况
const Station = (props) => {
return (
<h1>Station name: {props.location.state.name}</h1>
)
}
export default Station;
在这个组件中,我尝试了两种传递道具的方法,但仍然无法使其工作。我找到的唯一解决办法是
再次调用API以再次获取不是最佳的站点名称
从下拉列表中保存名称并在单击时设置名称,然后更新父组件的状态并将其传递给Station组件,这也不是一个最佳解决方案,因为我知道如何直接从Link组件传递参数。
根据文档,链接组件本身没有状态道具,但有一个状态键作为to道具的一部分:
来源:根据文档,链接组件本身没有状态道具,但有一个状态键作为to道具的一部分:
来源:简直不敢相信。就这样。我甚至都没注意到,我想我有隧道视力。谢谢你指出这一点。当你处于状态时很容易做到:难以置信。就这样。我甚至都没注意到,我想我有隧道视力。感谢您指出这一点。当您处于该区域时,可以轻松完成:
const Dropdown = (props) => {
return (
<ul>
<li>
<Link to={'/station/London'} key="lon" state={{name: 'London Central Station'}}>London </Link>
</li>
<li>
<Link to={'/station/Paris'} key="par" state={{name: 'Paris Central Station'}}>Paris</Link>
</li>
</ul>
)
}
export default Dropdown;
const Details = (props) => {
return (
<Switch>
<Route exact path='/' component={Home} />
{/* <Route path='/station/:id' render={(props) => (<Station {...props} data={props}/>)} /> */}
<Route path='/station/:id' component={Station} />
</Switch>
)
}
export default Details;