Reactjs 如何在react中显示API错误句柄？

在登录时，如果电子邮件和密码为空，则会抛出如下错误：

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

在API/登录时，我发送：

 {
    "email":"",
    "password":""
}

我想在我的React.js前端显示此错误，因此我尝试以下代码：

import React, { Component } from 'react'
import { withStyles } from '@material-ui/styles';
import PropTypes from 'prop-types'
import AppIcon from '../images/icon.png'
//mivi stuff
import Grid from '@material-ui/core/Grid';
import  Typography  from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import axios from 'axios';




class login extends Component {
    constructor(){
        super();
        this.state ={
            email:'',
            password:'',
            loading:false,
            error: {}

        }
    }
    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) =>{
            this.setState({
                errors:err.response.data,   
                loading:false
            })
        })
    }
    render() {
        const {classes} = this.props;
        const {error ,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={error.email} error={error.email ? true : false}  value={this.state.email} onChange={this.handleChnage} fullWidth />
                        <TextField id="password" name="password" type="password" label="Password" className={classes.textfeild}
                            helperText={error.password} error={error.password ? true : false}    value={this.state.password} onChange={this.handleChnage} fullWidth />
                        <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);

import React，{Component}来自“React”
从'@material ui/styles'导入{withStyles}；
从“道具类型”导入道具类型
从“../images/icon.png”导入AppIcon
//米维的东西
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/Button”导入按钮；
从“axios”导入axios；
类登录扩展组件{
构造函数（）{
超级（）；
这个州={
电子邮件：“”，
密码：“”，
加载：false，
错误：{}
}
}
handleChnage=（事件）=>{
这是我的国家({
[event.target.name]：event.target.value
})
}
handleSubmit=（事件）=>{
//console.log（'hi'）；
event.preventDefault（）；
这是我的国家({
加载：正确
});
常量用户数据={
电子邮件：this.state.email，
密码：this.state.password
}
axios.post（'/login'，userData）
。然后（（res）=>{
//console.log（res.data）
这是我的国家({
加载：错误
});
this.props.history.push（'/'）；
})
.catch（（错误）=>{
这是我的国家({
错误：err.response.data，
加载：错误
})
})
}
render（）{
const{classes}=this.props；
const{error，loading}=this.state
返回(
登录
登录
)
}
}
login.propTypes={
类：PropTypes.object.isRequired
}
导出默认样式（样式）（登录）；

当用户名和密码为空且单击时，这些错误不会显示。我怎样才能解决这个问题

由于API错误在errors对象的内部，我希望这就是为什么它不会显示的原因，但我无法将其更改回，我想显示电子邮件或密码是否为空。我想在这里显示该错误：

---

在

helperText={error.email}helperText={error.password}

的一侧，更新您的

.catch

阻止为

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

---

您的状态有

错误

，并且您正试图将值分配给

错误

，您需要将状态设置为

错误

。因为您正在使用

error.email

和

error.password

显示错误

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

更新

由于您是通过

err.response.data

获得此信息的

错误：对象{电子邮件：“请输入有效电子邮件”，密码：“请输入密码”}

您需要从

err.response.data

访问

errors

，例如

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

---

在catch中尝试

console.log（err.response.data）

并检查格式是否正确。是的，我得到

错误：{…}​​ 电子邮件：“请输入有效电子邮件”​​ 密码：“请输入密码”

此评论没有真正的帮助，什么不起作用？我尝试但不显示错误我的领事日志

错误：对象{电子邮件：“请输入有效电子邮件”，密码：“请输入密码”}

在渲染方法中尝试打印错误并检查您得到的内容。