提交处理程序,React Axios:在同一个处理程序中发布和获取
2021-11-23
532
我正在尝试创建一个上传文件的 Web 应用,并将当前用户作为外键附加到文件模型。由于某种原因,获取请求被清除,但它最初确实获取了所需的信息。
handleSubmit = (e) => {
e.preventDefault();
axios.get('http://127.0.0.1:8000/core/current_user/', {
headers: {
Authorization: `JWT ${localStorage.getItem('token')}`,
}
}).then((user) => {
this.state.creator = user.data;
console.log(this.state.creator);
})
console.log(this.state.creator);
let form_data = new FormData();
form_data.append('creator', this.state.creator);
form_data.append('file', this.state.file);
form_data.append('title', this.state.title);
form_data.append('description', this.state.description);
axios.post('http://localhost:8000/core/posts/', form_data, {
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `JWT ${localStorage.getItem('token')}`,
}
}).then(res => {
console.log(res.data);
}).catch(err => console.log(err))
};
第一个控制台返回用户信息,但第二个控制台返回 null。任何帮助都将不胜感激。
1个回答
原始
get
之后的
then
语句在第 11 行结束,其余代码位于该语句之外。
使用异步代码,
then
块之外的代码将在等待响应时继续运行,因此
this.state.creator
尚未设置。然后,一旦承诺解决,它将返回到
then
块内的代码。
您需要将第二个代码块的全部移动到初始
then
块内,以便仅在原始
get
请求的响应返回后才执行它:
handleSubmit = (e) => {
e.preventDefault();
axios
.get('http://127.0.0.1:8000/core/current_user/', {
headers: {
Authorization: `JWT ${localStorage.getItem('token')}`,
},
})
.then((user) => {
this.state.creator = user.data;
console.log(this.state.creator);
let form_data = new FormData();
form_data.append('creator', this.state.creator);
form_data.append('file', this.state.file);
form_data.append('title', this.state.title);
form_data.append('description', this.state.description);
axios
.post('http://localhost:8000/core/posts/', form_data, {
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `JWT ${localStorage.getItem('token')}`,
},
})
.then((res) => {
console.log(res.data);
})
.catch((err) => console.log(err));
});
};
Tetarchus
2021-11-23