辅助文本没有显示我的错误，如果我的登录数据无效，我的错误信息不会出现

Question

我试图在我的帮助文本组件(我使用材质UI)中显示我的错误。

我可以看到我所有的错误通过测试我的后端代码完美(我使用邮差进行测试)此外，当我的登录数据无效时，我无法看到按钮下应该出现的ErrorMessage

我终于可以成功登录了(如果凭据正确的话)

这是我的代码

import React, { Component } from 'react'
import axios from 'axios'
import { Button, Grid, TextField, Typography, withStyles } from '@material-ui/core'
import PropTypes from 'prop-types'

const styles = {
form: {
textAlign: 'center'
},
pageTitle: {
margin: '20px auto 20px auto'
},
textField: {
margin: '10px auto 10px auto'
},
button: {
marginTop: 20
},
customError: {
color: 'red',
fontsize: '0.8rem'
}

}


class login extends Component {

constructor() {
super();
this.state = {
email: '',
password: '',
errors: {}
};
}

handleSubmit = (event) => {
event.preventDefault();
console.log('h1')
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) => {
this.setState({
errors: err.response.data,
loading: false
})
})

}


handleChange = (event) => {
this.setState({
[event.target.name]: event.target.value
});
}


render() {

const { classes } = this.props
const { errors } = this.state

return (
<Grid container className={classes.form}>
<Grid item sm />
<Grid item sm>
<Typography variant="h2" className={classes.pageTitle}>
Login
</Typography>
<form noValidate onSubmit={this.handleSubmit}>
<TextField
id="email"
name="email"
type="email"
label="Email"
className={classes.textField}
helperText={errors.email} // Thats not workig
error={errors.email ? true : false}
value={this.state.email}
onChange={this.handleChange}
fullWidth
/>
<TextField
id="password"
name="password"
type="password"
label="Password"
className={classes.textField}
helperText={errors.password}

error={errors.password ? true : false}
value={this.state.password}
onChange={this.handleChange}
fullWidth  
/>
/>
{errors.general && (
<Typography variant="body2" className={classes.customError}>
{errors.general}  
</Typography>  // Thats not workig
)}
<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);

p。这是我的验证器函数，它显示了错误

exports.validateLoginData = (data) => {

let errors = {};
if (isEmpty(data.email)) errors.email = 'Must not be empty';
if (isEmpty(data.password)) errors.password = 'Must not be empty';
return {
errors,
valid: Object.keys(errors).length === 0 ? true : false
};
};

和部分登录路由

.catch((err) => {
console.error(err);
// auth/wrong-password
// auth/user-not-user
return res
.status(403)
.json({ general: "Wrong credentials, please try again" });
});
};

Answer 1

如果您尝试console.log this:err.response.datain catch callback from axios post，您可以看到一个对象{ errors: {}, valid: false }(作为后端代码的扣除)

你必须像这样绑定errors:

.catch((err) => {
this.setState({
errors: err.response.data.errors,
loading: false
})
})