[英]React: how to prevent api calls in ComponentDidMount and in ComponentDidUpdate override each other
在componentDidMount
我使用Redux
操作获取数据,例如:
componentDidMount() {
let parameter = some code;
this.props.getAction(parameter).then(r => {
if(r.type.endsWith('SUCCESS')){
this.setState({cList: r.payload.data.data})
}
}
}
然后,在componentDidUpdate
我需要再次获取数据,当函数内部的参数发生变化时(我正在使用lodash
):
componentDidUpdate(prevProps, prevState){
if(!isEqual(this.props.parameter, prevProps.parameter){
let parameter = some code;
if(r.type.endsWith('SUCCESS')){
this.setState({cList: r.payload.data.data})
}
}
}
问题是,如果Promise
在componentDidUpdate
返回之前的结果Promise
在componentDidMount
,当我有我的参数在组件发生变化,显示的数据是错误的; 它仍然呈现从数据componentDidMount
而不是来自新的动作在调用componentDidUpdate
。
我希望一切都清楚。
我怎么能避免这个? 谢谢。
您可以在组件中保留一个实例变量lastRequestId
,以跟踪正在运行的承诺,如下所示:
class MyComponent extends Component {
constructor(props) {
super(props);
this.lastRequestId = null;
}
componentDidMount() {
let parameter = "some code";
this.lastRequestId = 'ON_MOUNT_REQUEST';
this.props.getAction(parameter).then(r => {
if(r.type.endsWith('SUCCESS') && this.lastRequestId === 'ON_MOUNT_REQUEST'){
this.setState({cList: r.payload.data.data})
}
})
}
componentDidUpdate(prevProps, prevState){
if(!isEqual(this.props.parameter, prevProps.parameter)) {
let parameter = "some code";
this.lastRequestId = 'ON_UPDATE_REQUEST';
this.props.getAction(parameter).then(r => {
if(r.type.endsWith('SUCCESS') && this.lastRequestId === 'ON_UPDATE_REQUEST'){
this.setState({cList: r.payload.data.data})
}
})
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.