在我的应用程序中，一个用户有多个......比方说“狗”。当前选定的狗出现在标题中，并且可以通过标题的下拉菜单进行更改。选择新狗后，它会在后端将其标记为 primary: true，然后我会更新相应的标题 UI。从那时起，对后端的所有请求都会返回primary狗的结果。
我有一个 Layout.jsx 组件，如下所示:
<Header />
<div>
{this.props.children}
</div>
在 this.props.children 中，我为多个不同的资源渲染一个索引页面，即子组件的示例可能是发出网络请求的 TreatsContainer在 componentDidMount 到 /treats 中，结果在我的布局中呈现。
我面临的问题是，当用户在 header 组件中更改他们的狗时，我希望其他组件重新运行他们在 componentDidMount 中发出的相同网络请求，这样就可以显示新选择的狗的数据。我在应用程序中的几个位置实现了 Redux，但我不想将所有数据存储在全局状态树中，因为用户可以创建的资源数量没有限制。我的意思是我不想要来自 /treats、/toys、/foods 等的所有数据。数组。处理这种情况的好方法是什么？
最佳答案
我不确定我是否完全理解您的问题，但我仍会尽力回答。据我了解，您有一个设置主狗的Header组件。并且您希望子组件在该主狗发生更改时从后端获取新数据。
我实现这一目标的方法是
- 将当前的
主要狗存储在Redux存储中，并在它发生变化时在Header组件中触发一个操作来更新它。 - 在每个子组件中，使用
mapStateToProps从存储中访问primarydog作为 props - 在每个子组件中，当
this.props.primaryDog != nextProps.primaryDog时，调用后端以获取componentWillReceiveProps中的相关数据
关于reactjs - react : how to remount a sibling component to re-run componentDidMount?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46611098/