React-Redux：POST http://127.0.0.1:8000/api/auth/login 422（无法处理的实体）

Question

所以，我正在创建一个登录页面，并且正在关注一个教程，并且我对Redux一无所知，并且对React有所了解，所以我希望你们能给我详细的答案。谢谢

因此，我在laravel中有一个api，并且正在使用ReactJS创建一个接口。

现在，我创建了一个登录页面LoginPage.js

import React from "react";
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import LoginForm from '../forms/LoginForm';
import { login } from '../../actions/auth';


class LoginPage extends React.Component {

    submit = data => this.props.login(data).then(() => this.props.history.push('/'));
    render() {
        return (
            <div>
                <LoginForm submit={this.submit} />
            </div>
        );
    }
}

LoginPage.propTypes = {
    history: PropTypes.shape({
        push: PropTypes.func.isRequired
    }).isRequired,
    login: PropTypes.func.isRequired
};
export default connect(null, { login })(LoginPage);

然后，这是我的LoginForm.js

import React from 'react';
import { Button, Form, Grid, Segment } from 'semantic-ui-react'
import InlineError from "../messages/InlineError"
import PropTypes from 'prop-types';

class LoginForm extends React.Component {
    state = {
        data: {
            email: '',
            password: ''
        },
        loading: false,
        errors: {}
    };

    onChange = e => 
        this.setState({ 
            data: { ...this.state.data, [e.target.name]: e.target.value}
    });

    onSubmit = () => {
        const errors = this.validate(this.state.data);
        this.setState({ errors });
        if (Object.keys(errors).length === 0){
            this.props.submit(this.state.data);
        }
    };

    validate = (data) => {
        const errors = {};
        if (!data.password) errors.password = "Can't be blank";
        if (!data.email) errors.email = "Can't be blank";
        return errors;
    }

    render() {
        const { data, errors } = this.state;
        return (
            <div className='login-form'>
            <style>{`
              body > div,
              body > div > div,
              body > div > div > div.login-form {
                height: 100%;
              }
            `}</style>
            <Grid textAlign='center' style={{ height: '100%' }} verticalAlign='middle'>
              <Grid.Column style={{ maxWidth: 450 }}>
              <br />
              <br />
                <Form size='large' onSubmit={this.onSubmit}>
                  <Segment stacked>
                    <Form.Input error={!!errors.email}
                    type='email'
                    id='email'
                    name='email'
                    value={data.email}
                    onChange={this.onChange}
                    fluid 
                    icon='user' 
                    iconPosition='left' 
                    placeholder='E-mail address' 
                    />
                    { errors.email && <InlineError text={errors.email} />}
                    <Form.Input error={!!errors.password}
                    type='password'
                    id='password'
                    name='password'
                    value={data.password}
                    onChange={this.onChange}              
                    fluid
                    icon='lock'
                    iconPosition='left'
                    placeholder='Password'
                    />
                    { errors.password && <InlineError text={errors.password} />}
                    <Button fluid size='large' type="submit">
                      Login
                    </Button>
                  </Segment>
                </Form>
              </Grid.Column>
            </Grid>
          </div>
        );
    }
}

LoginForm.propTypes = {
    submit: PropTypes.func.isRequired
};

export default LoginForm;

我的auth.js

import { USER_LOGGED_IN } from '../types';
import api from '../api';

export const userLoggedIn = (user) => ({
    type: USER_LOGGED_IN,
    user
})

export const login = (credentials) => () => 
    api.user.login(credentials).then(user => dispatchEvent(userLoggedIn(user)));

我的rootReducer.js

import { combineReducers } from 'redux';
import user from './reducers/user';

export default combineReducers({
    user
});

我的user.js

import { USER_LOGGED_IN } from '../types';

export default function user(state = {}, action = {}) {
    switch (action.type) {
        case USER_LOGGED_IN:
            return action.user;
        default:
        return state;
    }
}

我的types.js

export const USER_LOGGED_IN = "USER_LOGGED_IN";

我的api.js

import axios from 'axios';

export default {
    user: {
        login: credentials => 
            axios.post("http://127.0.0.1:8000/api/auth/login", { credentials }).then(res => res.data.user)
    }
};

所以我想看的是：

但是我得到的是一个错误。

但是为什么...