Question

我正在尝试学习“反应路由器”，并且我正在做一个具有输入字段的应用程序，为您提供一个下拉列表，其中包含指向欧洲各种火车站的链接，当您单击该链接时，它将呈现一个组件，在这种情况下为Station组件，并显示有关电台的更多详细信息。

对于此应用程序，我将必须对外部API进行两次调用。第一个是找到火车站并在下拉列表中显示它们。这可以正常工作，从那里我可以获取站点的名称并将其放在下拉列表中，还可以得到一个id，它将用于查询第二个API以获取站点的详细信息。当用户单击下拉菜单中的站点时，将发生这种情况。现在可以使用。我的问题是，当用户单击下拉菜单中的站点时，我已经失去了站点的名称。我想以某种方式将其传递给Station Compoment。

这是我的Station组件：

const Station = (props) => {
 return (
  <h1>Station name: {props.location.state.name}</h1>
 )
}

export default Station;

这里是下拉列表组件，为简单起见，我已经硬编码了两个站点以使其正常工作，否则，下拉列表是与用户查询匹配的站点列表。

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;

我尝试使用state组件中的Link道具传递电台名称，但是当Station组件安装时，props.location.state尚未定义。

最后这是我的路线：

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;

在此组件中，我尝试了两种传递道具的方法，但仍然无法使它起作用。我发现的唯一解决方案是

再次调用API以重新获得不是最佳的电台名称
要从下拉列表中保存名称并在单击时设置名称，然后更新父组件的状态并将其传递给Station组件，当我想出如何传递时，这也不是最佳解决方案参数直接来自Link组件。

Answer 1

根据文档，state组件本身没有Link道具，但是state道具中有一个to键：


<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>

来源：https://reacttraining.com/react-router/web/api/Link/to-object

链接组件无法传递状态。为什么状态未定义？

1 个答案: