[ReactJS中有一个带有FETCH api的代码块运行得很好,但是当我尝试用AXIOS替换它时,即使我检查了文档,它也无法正常运行。
const signup = (user) => {
return fetch(`${API}/signup`, {
method: "POST",
headers: {
Accept: 'application/json',
"Content-Type": 'application/json'
},
body: JSON.stringify(user)
})
.then(response => {
return response.json();
})
.catch(err => {
console.log(err);
});
}
const clickSubmit = (event) =>{
event.preventDefault();
signup({name, email, password})
.then(data => {
if(data.error){
setValues({...values, error: data.error, success: false})
}
else{
setValues({...values, name: '', email: '', password: '', error:'', success:true})
}
})
}
import axios from 'axios';
const signup = (user) => {
return axios(`${API}/signup`, {
method: "POST",
headers: {
Accept: 'application/json',
"Content-Type": 'application/json'
},
data: JSON.stringify(user)
})
.then(response => {
return response.data;
})
.catch(err => {
console.log(err);
});
}
const clickSubmit = (event) =>{
event.preventDefault();
signup({name, email, password})
.then(data => {
if(data.error){
setValues({...values, error: data.error, success: false})
}
else{
setValues({...values, name: '', email: '', password: '', error:'', success:true})
}
})
}
使用axios库编写以上代码后出现的错误是:
未处理的拒绝(TypeError):无法读取未定义的属性'错误'
axios代码有什么问题?
注意:
显然我将其范围缩小到了未定义的位置。
signup({name, email, password})
.then(data => {
if(data.error){
setValues({...values, error: data.error, success: false})
}
else{
setValues({...values, name: '', email: '', password: '', error:'', success:true})
}
})
}
在.then()块中,“数据”以未定义的形式出现,我不知道为什么使用fetch api可以正常工作。
参考此处的Axios文档:https://github.com/axios/axios#response-schema
您所缺少的是
.then(response => {
return response.data;
})
而不是:
.then(response => {
return response;
})
尝试:
axios({
method: "POST",
url: '${API}/signup',
data: JSON.stringify(user)
})
...