强制 React 容器刷新数据 [英] Force React container to refresh data
问题描述
在我的 React 应用程序中，我有两种不同类型的组件:presentations 和 containers.它大致是在 Dan Abromov 的 "Presentational and Container Components" 之后，除了我不使用 Flux 或 Redux.
In my React application, I have two distinct types of components: presentations and containers. It's roughly after Dan Abromov's "Presentational and Container Components", except I don't use Flux or Redux.
现在，我有以下结构:
UsersContainer
├── UsersListContainer
| └── UsersListView
└── AddUserContainer
UsersListContainer 负责从某些 REST API 加载数据，如果加载成功，它将将该数据委托给 UsersListView.
The UsersListContainer is responsible for loading data from some REST API, and if that succeeds, it delegates presenting that data to the UsersListView.
AddUserContainer 负责再次通过调用 REST API 添加新用户.现在，当它成功时，我希望 UsersListContainer 刷新其数据.
The AddUserContainer is responsible for adding a new user, again, by invoking an REST API. Now, when that was successful, I would like the UsersListContainer to refresh its data.
我能想到的最好的是:
class AddUserContainer extends React.Component {
render() {
// Other UI elements omitted for brevity
return (<button onClick={ e => props.onUserAdded() }>Add user</button>);
}
}
class UsersListContainer extends React.Component {
componentWillMount() {
// start fetching data using window.fetch;
// the promise callback will but retrieved data into this.state
}
render() {
return (<table></table>);
}
}
class UsersContainer extends React.Component {
render() {
const forceUpdate = this.setState({ ...this.state, refreshToken: Math.random() });
// Other UI elements omitted for brevity
<UsersListContainer key={ this.state.refreshToken } />
<AddUserContainer onUserAdded={ forceUpdate } />
}
}
但是这种方法感觉像是误用了 key 道具.有没有更好/更优雅的方法来做到这一点?
But this approach feels like mis-using the key prop. Is there a better / more elegant way to do this?
推荐答案
如果你还不想使用 Flux 或 Redux，那么更新对等组件(在你的情况下，UsersListContainer 和 AddUserContainer)有点，在我的意见，React 的反模式.
If you don't want to use Flux or Redux yet, then updating peer-components (in your case, UsersListContainer and AddUserContainer) is a bit, in my opinion, anti-pattern for React.
对我来说，React 的主要思想是将 props 从父级传递给子级，因此，Irvin Lim 的想法摆脱了 UsersListContainer 但将 AddUserContainer 移到了 UsersContainer"将使您更容易控制何时更新组件！
The main idea of React is, to me, passing props from parent to children, therefore, Irvin Lim's idea to "got rid of UsersListContainer but moved AddUserContainer into UsersContainer" will make it easier for you to control when to update your component!
您目前的做法和我的想法是一样的:在您的UsersContainer中，创建一个方法来强制更新它，然后将其传递给AddUserContainer，并在添加此AddUserContainer之后用户，您在父级上触发该更新方法:
Your current approaching and my idea are the same: in your UsersContainer, create a method to forceUpdate it, then pass it along to AddUserContainer, and after this AddUserContainer added a user, you trigger that updating method on the parent:
<AddUserContainer onUserAdded={ this.props.updatingParent } />
为了您的参考，或任何其他想要了解如何在子(或孙或曾孙)更新时更新父组件的人，请参阅我对另一个类似问题的回答:
For your reference, or for anyone else who wants to understand about how to update the parent component whenever child (or grandchild or great-grandchild) updates, please refer to my answer to another similar issue:
如果您仍然保留当前的组件层次结构，当 UsersContainer 更新时，其子组件(UsersListContainer 和 AddUserContainer)将是也更新了但是，AddUserContainer 将再次更新！
If you still keep your current component-hierarchy, when UsersContainer is updated, its child-components (UsersListContainer and AddUserContainer) will be updated, too. However, AddUserContainer will once again be updated!
因此，我仍然认为在您的情况下，使用 Flux 或 Redux 是一种不错的方法，它消除了通过许多深度和深度级别传递 props 的复杂性.复杂的组件层次结构
As a result, I still think in your case, using Flux or Redux is a nice approaching, which eliminates to complexity of passing props through many levels of deep & complicated component-hierarchy
这篇关于强制 React 容器刷新数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
