reactjs - 如何在 react 中重置子组件状态

Question

这是我的应用程序组件:

<SystemList />
<SystemDetail />
  <WorldList />
  <WorldDetail />

数据结构是有几个系统，每个系统有几个世界。每个世界都有详细的信息。

在react中，当点击每个系统时，都有一个获取activeSystem的action，然后SystemDetail会渲染信息。在 SystemDetail 内部，它有两个子组件，分别称为 WorldList 和 WorldDetail。当点击世界列表时，有一个显示世界详细信息的 Action 。

所以我的应用程序在单击系统列表后工作正常，它到达系统详细信息，然后在单击世界列表后，它到达世界详细信息。但是，我在重置世界详细信息时遇到了问题，这意味着当我再次单击系统列表时，世界详细信息仍然显示以前的世界。

我尝试设置组件的 key ，但没有成功。我也尝试过传递 Prop ，或者重置 Prop ，也没有用。

单击 SystemList 中的 System 后如何重置 WorldDetail 组件的状态？是否有意义？或者也许模型会更有意义。

我对 React 和 Redux 还很陌生，所以任何帮助都会很棒!

Answer 1

您可以在 WorldDetail 内使用 componentWillReceiveProps 来更改此状态。当它从 SystemDetail 接收到新的 props 时。