我正在尝试为负责注册用户的React组件SignupForm.js
设置一个错误处理程序,特别是,我重点实现的处理程序涉及到处理已在使用的用户电子邮件示例。
下面是我的POST请求:
await axios
.post("http://localhost:8000/signup", {
name,
email,
password,
tokenValue,
})
.catch((error) => {
console.log("ERROR --> ", error);
//this.displayError(error);
this.setState(
{
err: true,
errcode: error.response.data.errcode,
errtext: error.response.data.errText,
},
() => {
console.log("setstate done");
}
);
})
.then((res) => {
if (res !== undefined) {
console.log(res.data);
}
});
下图显示了Chrome开发工具的输出:
正如您所看到的,console.log("Error --> ", error);
确实在启动,但是this.setState()
似乎没有启动,有一些迹象表明这一点。
1.使用React DevTools插件观察到的SignupForm
状态保持不变。
1.我在render()
函数的最顶端包含了一个print语句,如下所示:
render() {
console.log(this.state);
return (
<div className="form-container">
<form
name="sign-up"
method="post"
className="form-sign-up"
尽管有setState()
调用应该触发重新呈现的概念,但是在捕捉到错误之后,组件状态从未被打印到控制台。
console.log("setstate done");
永远不会触发,因为DevTools控制台中也缺少输出。
我尝试过的事情
1.我尝试将setState()
调用封装到错误处理函数displayError(e)
中,如下所示:
displayError = (e) => {
this.setState(() => ({
err: true,
errcode: e.response.data.errcode,
errtext: e.response.data.errText,
}));
};
这似乎没有任何效果,我还尝试在组件构造函数中调用this.displayError = this.displayError.bind(this);
之后调用displayError(e)
,同样没有效果。
在这一点上,我真的不知道还能尝试什么。
1条答案
按热度按时间bvuwiixz1#
我想明白了。最初,我很想把我的代码发布到网上,让你们看看。在对CodeSandbox有了一点了解之后,我想我需要学习Docker,这样我就可以在拥有一个免费的MySQL数据库的同时编写前端和后端。
这是令人沮丧的我,因为我知道 Docker 可能需要一点时间来学习,我想得到的底部,这与最少的箍可能。
我听了@S.马克思的话,我进行了调查,在思考了他们说的话之后,我也觉得很奇怪,我会把我的
catch
块放在我的then
块之前。果然,交换这两个块完全解决了这个问题。现在状态被更改为:
当然,现在应该在屏幕上呈现状态变化的组件没有显示错误消息,但这是一个单独的问题。