Question

在我的应用程序中，用户有多个..让我们说'狗'。当前选定的狗出现在标题中，可以通过标题的下拉菜单进行更改。选择新狗后，它会在后端标记为primary: true，并进行相应的标题UI更新。从那时起，对后端的所有请求都会返回primary狗的结果。

我有一个Layout.jsx组件，如下所示：

<Header />
<div>
  {this.props.children}
</div>

在this.props.children中，我为多个不同的资源呈现索引页面，即子组件的示例可能是TreatsContainer，其中componentDidMount到{{1}的网络请求，结果在我的布局中呈现。

我面临的问题是当用户在标题组件中更改他们的狗时，我希望其他组件重新运行他们在/treats中进行的相同网络请求，以便显示新选择的狗的数据。我在应用程序中的几个地方实现了Redux，但我不想将所有数据存储在全局状态树中，因为用户可以创建的资源数量没有限制。我的意思是，我不希望在一堆数组中来自componentDidMount，/treats，/toys等的所有数据。处理这种情况的好方法是什么？

Answer 1

我不确定我是否完全理解你的问题，但我仍会尽力回答这个问题。根据我的理解，您有一个Header组件，用于设置primary dog。并且当您primary dog发生更改时，您希望您的子组件从后端获取新数据。

我实现这一目标的方式是

将当前primary dog存储在Redux商店中，并在Header组件更改时触发操作，以进行更新。
从每个子组件中，使用primary dog

mapStateToProps

在每个子组件中，在componentWillReceiveProps

this.props.primaryDog != nextProps.primaryDog

Answer 2

我同意@palsrealm的建议方法，但如果你正在使用react-router，这里有一个替代方案：

将primary dog的ID放入网址

<Route path="/:dogId" component={DogIndex} />

然后当用户选择主要狗时，您可以路由到索引页面。

<Link to=`/${selectedDogId}` />

然后您的组件（DogIndex）将会挂载，componentDidMount将会触发。

React：如何重新安装兄弟组件以重新运行componentDidMount？

2 个答案: