javascript - 如何在对象内部和对象外部处理js前端中的后端错误
问题描述
我有用户登录,我有 2 个错误处理程序
邮箱和密码为空
电子邮件和密码与数据库不匹配
通过我发送的邮递员
- 空的用户名和密码结果是
{
"errors": {
"email": "please enter valid emails",
"password": "please enter password"
}
}
- 电子邮件和密码错误结果是
{
"general": "email or password not match"
}
我注意到第一个错误它有对象错误而第二个没有
我的反应 js 代码是
// i remove css and imports
class login extends Component {
constructor() {
super();
this.state = {
email: '',
password: '',
loading: false,
errors: {}
}
}
handleChnage = (event) => {
this.setState({
[event.target.name]: event.target.value
})
}
handleSubmit = (event) => {
// console.log('hi');
event.preventDefault();
this.setState({
loading: true
});
const userData = {
email: this.state.email,
password: this.state.password
}
axios.post('/login', userData)
.then((res) => {
//console.log(res.data)
this.setState({
loading: false
});
this.props.history.push('/');
})
.catch((err) => {
console.log(err.response.data)
// let errors ={email:'',password:''}
this.setState({
//errors11: err.response.data.errors,
errors : err.response.data.errors,
// error2:err.response.data,
loading: false
})
})
}
render() {
const { classes } = this.props;
const { errors, loading,} = this.state;
return (
<Grid container className={classes.form}>
<Grid item sm />
<Grid item sm >
<img src={AppIcon} alt="app cion" className={classes.image} />
<Typography variant="h2" className={classes.pagetitle}>Login</Typography>
<form noValidate onSubmit={this.handleSubmit}>
<TextField id="email" name="email" type="email" label="Email" className={classes.textfeild}
helperText={errors.email} error={errors.email ? true : false} value={this.state.email} onChange={this.handleChnage} fullWidth />
<TextField id="password" name="password" type="password" label="Password" className={classes.textfeild}
helperText={errors.password} error={errors.password ? true : false} value={this.state.password} onChange={this.handleChnage} fullWidth />
{errors.general &&(
<Typography variant="body2" className={classes.customerror}>
{errors.general}
</Typography>
)}
<Button type="submit" variant="contained" color="primary" className={classes.button}>Login </Button>
</form>
</Grid>
<Grid item sm />
</Grid>
)
}
}
login.propTypes = {
classes: PropTypes.object.isRequired
}
export default withStyles(styles)(login);
如果我发送电子邮件和密码错误,我的问题出在此代码中
93 | helperText={errors.email} error={errors.email ? true : false} value={this.state.email} onChange={this.handleChnage} fullWidth
这条线我出错了,这是我的控制台日志
general: "email or password not match"
我该如何处理这种错误?
解决方案
查看您的请求处理代码和响应,我可以看到错误响应在处理错误的方式上并不一致。我认为您应该考虑将响应固定为一致。我会尝试在提交的错误处理中替换行
errors : err.response.data.errors,
带有一些会为一般错误创建结构的东西:fe
errors : {...err.response.data.errors, general: err.response.data.general}
推荐阅读
- bash - 如何从多个文件中删除多个第一列?
- javascript - JavaScript onMouseOver 适用于 Chrome,但不适用于桌面 Safari
- c++ - 如何使用函数参数设置数组大小?
- python - 为什么我的模型的准确性会根据它是从泡菜加载还是新训练的而改变?
- c# - 将 Dapper IDictionary 转换为类?
- netty - netty 如何处理未回复或丢失的 SYN 数据包?
- wordpress - htaccess,rewriteurl 到子文件夹中 WordPress 站点的页面
- ios - 链接 ktor 和 kotlinx.coroutines 会导致未定义的符号
- c# - TestStack.White ListBox.SelectedItemText 不起作用
- javascript - 为什么我的正则表达式会使用“++”而不是任何其他特殊字符组合来创建内部服务器错误?