reactjs - react、react-router 和异步数据加载

Question

我正在使用 react、alt.js 和 react-router，并使用基本的 CRUD 构建应用程序。有一个用于“创建项目”的菜单项，它会调出一个模式(使用 react-bootstrap ...)并在提交时触发一个操作以在后端创建一些模型，然后执行 browserHistory。 push (按照 react-router 文档中的建议)完成后转到新创建项目的项目页面。

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

我的异步加载逻辑(好吧，至少是 fetchItem 的 Action 调用)在 ItemViewPage react 组件的 componentDidMount 中，根据我在网上可以找到的所有示例，这看起来非常典型。

问题是，如果页面当前已经呈现，componentDidMount 永远不会被调用，因为组件已经安装(!)。所以我的页面 URL 更新为 /item/2，但内容仍然是 /item/1。

所以，我的问题是......是的。我从 componentDidMount 启动数据加载是错误的吗？我是否应该使用其他生命周期方法(例如，componentWillReceiveProps，因为 React 路由器将设置一个新 ID)？或者是否有其他完全应该从中触发数据加载的地方(例如，react-router 是否有一些我不知道的功能可以处理这个问题)？

Answer 1

由于 React 很聪明并且知道您在路由中重复使用该组件，因此该组件将保持挂载状态。您选择的生命周期方法将无法处理这项工作，因为它会在组件的初始安装时被调用一次。

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