Question

我有一个React应用程序，其中使用React路由器链接页面。为用户提供了几个链接。每个链接都是通过路由器处理的。

所有相应页面在呈现功能之前都有相似的逻辑，因此我使用了URL参数，单个Route路径和相同的目标组件。 URL参数应该传递给后端服务。

由于目标组件是相同的，并且唯一区别因素是URL参数，因此一旦为任何链接呈现了组件，就不会再次执行生命周期方法，例如componentWillMount，componentDidMount。因此，即使我单击另一个链接，无论第一次点击所创建的状态是什么，其他链接都将使用相同的状态。 REST调用位于componentDidMount中。我想念什么吗？

<Route path="/location/:locationType" component={MapSelectedLocation}/>

MapSelectedLocation应该处理多个locationType并基于该位置调用REST服务。

预期结果是对不同的locationType执行相同的代码。我该如何实现？

Answer 1

您需要使用componentDidUpdate生命周期方法来进行计算或更改每个道具/状态。将检查放入此方法，然后比较prevProps和新的props值。此外，在初始渲染时不会调用此方法

赞：

componentDidMount() {
  this.doCalculation();
}

componentDidUpdate(prevProps) {
  if(this.props.match.params.locationType != prevProps.match.params.locationType) {
    this.doCalculation()
  }
}

doCalculation() {
  // do the calculation here
}

React Router-在componentDidMount外部调用相同的方法

1 个答案: