reactjs有效负载显示未定义

Question

我正在学习如何反应js及其工作流程（例如redux）如何工作。在某些情况下，我不知道为什么当我请求数据时我无法从API（如代码下面）获得响应，而我无法获得有效载荷没有任何建议吗？也许我知道是什么原因表明有效载荷未定义。

RegisterAction.js

import { REGISTER_REQUEST, REGISTER_SUCCESS, REGISTER_FAILURE } from './types';
import { authService } from '../services/authService';


export function register(user) {
    return dispatch => {
        dispatch(request(user));

        authService.register(user)
            .then(
                user => { dispatch(success()); },
                error => { dispatch(failure(error)); }
            );
    };

    function request(user) {
        return { type: REGISTER_REQUEST, payload: user }
    }
    function success(user) {
        return { type: REGISTER_SUCCESS, payload: user }
    }
    function failure(error) {
        return { type: REGISTER_FAILURE, error }
    }
}

RegistrationReducer.js

import { REGISTER_REQUEST, REGISTER_SUCCESS, REGISTER_FAILURE } from '../actions/types';

const initialState = {
    user: [],
    registerigIn: false,
    registeredIn: false
}

export default function (state = initialState, action) {
    console.info("reducer:", "state is:", state, "action is:", action.payload)

    switch (action.type) {
        case REGISTER_REQUEST:
            return {
                ...state,
                user: action.payload,
                registering: true,
            };
        case REGISTER_SUCCESS:
            return {
                ...state,
                user: action.payload,
                registered: true
            };
        case REGISTER_FAILURE:
            return {
                registering: false
            };
        default:
            return state
    }
}

AuthService.js

import { authHeader } from '../helpers/authHeader';

export const authService = {
    register
};

function register(user) {
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(user)
    };

    return fetch(`https://reqres.in/api/register`, requestOptions).then(handleResponse);
}

function handleResponse(response) {
    return response.text().then(text => {
        const data = text && JSON.parse(text);
        if (!response.ok) {
            if (response.status === 401) {
                // auto logout if 401 response returned from api
                logout();
                // location.reload(true);
            }

            const error = (data && data.message) || response.statusText;
            return Promise.reject(error);
        }

        return data;
    });
}

查看

import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { register } from '../../actions/registrationActions'
import './Authentication.css'

class Registration extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: ''
        }
        this.onChange = this.onChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this)
    }

    onChange(e) {
        this.setState({
            [e.target.name]: e.target.value
        });
    }

    onSubmit(e) {
        e.preventDefault();
        const user = this.state;
        console.info("register Data:", user)
        this.props.register(user)
    }

    render() {
        return (
            <React.Fragment>
                < div className="text-center" >
                    <div className="logo">Register Page</div>
                    <div className="login-form-1">
                        <form id="register-form" className="text-left" onSubmit={this.onSubmit}>
                            <div className="login-form-main-message"></div>
                            <div className="main-login-form">
                                <div className="login-group">
                                    <div className="form-group">
                                        <label htmlFor="reg_surname" className="sr-only">Email</label>
                                        <input
                                            type="text"
                                            className="form-control"
                                            id="email"
                                            name="email"
                                            onChange={this.onChange}
                                            placeholder="email" />
                                    </div>
                                    <div className="form-group">
                                        <label htmlFor="reg_password" className="sr-only">Password</label>
                                        <input type="password"
                                            className="form-control"
                                            id="password"
                                            name="password"
                                            onChange={this.onChange}
                                            placeholder="" />
                                    </div>
                                </div>
                                <button
                                    type="submit"
                                    title="Gönder"
                                    className="login-button"><i className="fa fa-chevron-right"></i>
                                </button>
                            </div>
                            <div className="etc-login-form">
                                <p>Hesabiniz var mı? <a href="https://www.google.com">Giriş yap</a></p>
                            </div>
                        </form>
                    </div>
                </div >
            </React.Fragment>
        )
    }
}

Registration.propTypes = {
    register: PropTypes.func.isRequired
}

export default connect(null, { register })(Registration)