Reactjs -我如何创建一个布尔基于一个成功的axios POST?

Question

我有一个调度，用于确认用户是否已登录。现在，它根据Login字段中的任何输入发送数据。也就是说，你可以输入错误的用户名和密码，调度程序会像凭证是正确的一样处理一切。

我想只在用户成功输入正确的用户名和密码后才使用我的调度。这是我的代码!

export default function SignIn() {
const history = useHistory();
const initialFormData = Object.freeze({
email: '',
password: '',
});
const [formData, updateFormData] = useState(initialFormData);
const handleChange = (e) => {
updateFormData({
...formData,
[e.target.name]: e.target.value.trim(),
});
};
const dispatch = useDispatch();
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
axiosInstance
.post(`auth/token/`, {
grant_type: 'password',
username: formData.email,
password: formData.password,
})
.then((res) => {
console.log(res);
localStorage.setItem('access_token', res.data.access_token);
localStorage.setItem('refresh_token', res.data.refresh_token);
history.push('/');
window.location.reload();
});
dispatch(login({
name: formData.email,
password: formData.password,
loggedIn: true,
}))
};

下面是问题的重点，我想只在用户成功登录时才启动我的调度。目前，任何文本字段的输入都会触发调度。

dispatch(login({
name: formData.email,
password: formData.password,
loggedIn: true,

我在想一个布尔值，为成功POST HTTP 200请求提供一个真假?如果有更简单的方法，那么我想知道:)

Answer 1

将调度放在then块中，并添加一个catch方法来处理错误

const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
axiosInstance
.post(`auth/token/`, {
grant_type: 'password',
username: formData.email,
password: formData.password,
})
.then((res) => {
console.log(res);
localStorage.setItem('access_token', res.data.access_token);
localStorage.setItem('refresh_token', res.data.refresh_token);
history.push('/');
window.location.reload();
dispatch(login({
name: formData.email,
password: formData.password,
loggedIn: true,
}))
})
.catch(err => {
// HANDLE ERROR HERE
}
};