如何在对象内部和对象外部处理js前端中的后端错误

问题描述

我有用户登录，我有 2 个错误处理程序

i have user login and i have 2 errors handlers

1. 电子邮件和密码为空

1. email & password empty

电子邮件和密码与数据库不匹配

email & password not match with data base

通过我发送的邮递员

1. 空的用户名和密码结果是

{
    "errors": {
        "email": "please enter valid emails",
        "password": "please enter password"
    }
}

1. 邮箱和密码错误结果是

{
    "general": "email or password not match"
}

我注意到第一个错误它有对象错误而第二个没有

i notice 1st error its have object errors and 2nd not have

我的反应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);

如果我发送电子邮件和密码错误，我的问题出在这段代码中

my problem is in this code if i send email and password wrong

<代码>93 |helperText={errors.email} 错误={errors.email ?true : false} value={this.state.email} onChange={this.handleChnage} fullWidth

这行我出错了，这是我的控制台日志

this line i got error and this is my console log

general: "email or password not match"

我该如何处理这种错误?

how can i handle this kind of errors ?

推荐答案

查看您的请求处理代码和响应，我可以看到错误响应在处理错误的方式上并不一致.我认为您应该考虑将响应固定为一致.我会尝试在提交的错误处理中替换行

Looking at the code of your request handling and the responses I can see that error responses are not consistent in how it handles errors. I think you should think about fixing the response to be consistent. I would try to replace line in error handling of submit

errors : err.response.data.errors,

带有一些可以为一般错误创建结构的东西:f.e.

with something that would create structure for general erros: f.e.

errors : {...err.response.data.errors, general: err.response.data.general}

这篇关于如何在对象内部和对象外部处理js前端中的后端错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！