我知道我们可以通过以下方式轻松发送mapStateToProps
的内容:
constructor(props){
super(props);
this.state = {
filteredApps: this.props.apps
}
}
在此用例中,this.state.filteredApps
充满了Redux映射到道具的内容。
但是如果this.props.apps
仅在异步调用后才正确填充怎么办?在异步上下文中,this.props.apps
在初始化之前将是一个空数组,直到获取实际数据为止。以这个为例:
class AppFilterer extends React.Component {
constructor(props) {
super(props);
this.state = {
filteredApps : this.props.apps
}
}
componentWillMount() {
this.props.getApps();
}
render(){ return <div> </div> }
}
const mapStateToProps = state => {
let { apps } = state.Admin;
return { apps };
};
export default connect(mapStateToProps, { getApps })(AppFilterer);
在这种情况下,我的Redux动作(由Saga捕获)this.props.getApps();
是充满props
应用程序的调用,并且是通过componentWillMount
函数调用的。它被初始化为一个空数组,然后在调用完成后被应用填充。
我希望在从API中提取这些应用程序后对其进行过滤,因此希望将它们放入组件的状态中,以免干扰Redux状态。在这种情况下,更新组件状态的最佳实践是什么?换句话说,是否有办法获取已映射到props的英雄传奇的结果并将其设置为组件的状态,或者我是否正在寻找怪异的模式并应以其他方式对其进行过滤?
答案 0 :(得分:1)
首先,API调用进入componentDidMount
,而不进入componentWillMount
,现在也已弃用。请参阅此指南:
第二,当您使用redux状态并将其映射到props时,请勿将其设置为组件本地状态,这不是一个好习惯。当您的诺言恢复时,您将收到更新的道具,在这种情况下,您始终可以依靠道具。
但是,如果您仍然想这样做,则可以覆盖componentDidUpdate(prevProps)
,当您更新道具或状态时会调用它。如果您仍想在此设置状态,则可以在这里设置。
请注意过滤条件
您可以使用componentDidUpdate
方法进行过滤,例如:
this.setState({filteredApps. this.props.apps.filter(<your filter logic>)})