响应、响应-路由器和异步数据加载

Question

我正在使用react、alt.js和react路由器，并使用基本CRUD构建应用程序。有一个用于"Create“的菜单项，它会弹出一个模式(使用react bootstrap.)在提交时，它会触发一个操作，在后端创建某个模型，然后执行一个browserHistory.push (正如react路由器文档中所建议的那样)，当这个操作完成后，转到新创建的项目的item页面。

所以在基本情况下，这是可行的。例如，如果我在主应用程序页面上，它就能工作。但是，如果我已经在另一个项的item detail页面上(假设我在/item/1上，我刚刚创建了/item/2，所以我尝试从页面/item/1重定向到/item/2 )。

我的异步加载逻辑(至少对于fetchItem)是在componentDidMount of ItemViewPage react组件中，根据我可以在网上找到的所有示例，这似乎是非常典型的。

问题是，如果页面当前已经呈现，componentDidMount就不会被调用，因为组件已经挂载(！)。因此，我的页面URL更新到/item/2，但内容仍然是/item/1的。

所以，我的问题is....Yeah。从componentDidMount启动数据加载是错误的吗？我是否应该使用其他的生命周期方法(例如，componentWillReceiveProps，因为react路由器将设置一个新的id)？或者，是否还有其他的地方，我应该从那里启动数据负载(例如，react路由器有一些我不知道的特性来处理这个问题)？

Answer 1

因为React是智能的，并且知道您在路由中重用了组件，所以组件将保持挂载。您选择的生命周期方法将无法处理作业，因为它在组件的初始挂载时会被调用一次。

我建议您使用componentWillReceiveProps，在这里您可以检查项目的id字段是否发生了更改。这意味着您可能应该更新，因为有新的，不同的数据要呈现。