我有一个组件在react中,它在一个循环中从后端(django)请求图像,我收到每个请求的响应图像,并且它是在循环中发生的,因此在渲染时它以视频形式运行,正在以快速的方式渲染多张图像,使其变成视频,我还有另一个注册用户的组件,两个组件都能完美工作。
但是当我像在一个选项卡中运行视频并在另一个选项卡中注册用户那样并行运行它们时,我必须停止视频请求然后注册请求完成。如何在视频请求运行时注册用户它不应该等待视频停止播放。
视频组件位于 recognize.js 文件
中 runInfinite=()=>{
let payload={
iterator:this.state.iterator
};
axios.post('http://127.0.0.1:8000/faceapp/process_image/',payload)
.then(res => {
this.setState({baseimage: res.data});
this.setState({iterator:this.state.iterator+1})
})
};
render(){
if (this.state.flag){
this.runInfinite()
}
return(
<div>
{this.state.baseimage?<img src={"data:image/png;base64," + this.state.baseimage}/>:null}
</div>
)
}
用户在注册组件中
注册 axios.post(' http://127.0.0.1:8000/faceapp/create_user/',payload)
.then(res=>{
if (res.status===201){
this.setState({status:<img alt src={require('../assets/images/tick.png')} width="20" height="20"/>});
}
for (let i=0;i<this.state.images.length;i++) {
let formdata2=new FormData();
formdata2.append("user_image",this.state.images[i][0]);
axios.put('http://127.0.0.1:8000/faceapp/manage_user/'+res.data.id+'/',formdata2)
.then(res=>{
console.log(res)
});
for (let j=0;j<this.state.images[i].length;j++){
let formdata=new FormData();
formdata.append("user",res.data.id);
formdata.append("user_image",this.state.images[i][j]);
if (j!==0) { // as first image is main so neglect main image in multiple images
axios.post('http://127.0.0.1:8000/faceapp/create_user_image/',formdata)
.then(res => {
console.log(res)
})
}
}
}
})
.catch(err=>{
this.hideLoader();
this.setState({status:<img alt src={require('../assets/images/cross.png')} width="20" height="20"/>});
})
如果视频请求运行在accept.js文件中,如何在其他选项卡中同时运行register.js文件中的注册请求