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

在我的应用程序中，用户有多个..让我们说'狗'。当前选中的狗出现在标题中，并且可以通过标题的下拉菜单进行更改。在选择他们的新狗后，它在后端将其标记为primary: true，并且我将相应的标头UI更新。从那时起，所有到后端的请求都会返回primary狗的结果。React：如何重新安装一个兄弟组件重新运行componentDidMount？

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

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

在this.props.children，我渲染多个不同的资源索引页，即一个子组件的例子可能是TreatsContainer其中一个网络请求在componentDidMount到/treats之间，结果在我的布局中呈现。

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

来源

2017-10-06 mycellius

当'Header'中的选择改变时，'Layout'中的道具是否改变？如果不是，他们可能应该。然后，您可以使用相同的网络调用实现'componentWillReceiveProps'（可能在* both *方法之外定义，因此不必重复）。我认为试图卸载/重新安装是一个隐藏实际问题的XY问题。你可以为头选择一个单独的redux状态元素，并将'Layout'连接到它。 –

我不确定我完全理解你的问题，但我仍然会尽力回答它，以尽我所能。据我所知，你有一个Header组件，它设置primary dog。并且您希望您的子组件在此primary dog发生更改时从后端获取新数据。

我会做到这一点的方式是

存储当前primary dog在终极版商店和解雇你Header组件的操作时，它的变化，更新它。
从每个子组件，从商店访问primary dog如使用mapStateToProps
在每个子组件的道具，做一个调用后端在componentWillReceiveProps当this.props.primaryDog != nextProps.primaryDog

来源

2017-10-06 17:58:47 palsrealm

我同意获取相关数据@ palsrealm的建议的方法，但这里有一个选择，如果你正在使用react-router：

把primary dog“的ID在URL中，

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

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

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

然后你的组件（DogIndex）将安装和componentDidMount将闪光。

来源

2017-10-06 18:48:06

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

回答

相关问题