Не удается прочитать свойство 'map' из неопределенного при получении данных

Question

Я пытаюсь получить данные пользователей из API.У меня ошибка:

Невозможно прочитать свойство 'map' из неопределенного при получении данных

Я прочитал и проверил много примеров того, что сделали другие. Кажется, довольно легкофигура, но, поскольку я новичок, я не смог понять, откуда возникла ошибка.

Где моя ошибка?Почему эта ошибка появляется и что ее вызвало?

import {
    LOGIN_REQUEST, LOGIN_SUCCESS, LOGIN_FAILURE, LOG_OUT,
    GETALL_REQUEST, GETALL_SUCCESS, GETALL_FAILURE
} from './types';
import axios from 'axios';

export function getAllUser() {
    return dispatch => {
        dispatch(request());
        axios.get('https://jsonplaceholder.typicode.com/users')
            .then(res => console.info(res.data))
            .then(
                users => dispatch(success(users)),
                error => dispatch(failure(error))
            )
    }
    function request() {
        return { type: GETALL_REQUEST }
    }
    function success(users) {
        return {
            type: GETALL_SUCCESS,
            payload: users
        }
    }
    function failure(error) {
        return {
            type: GETALL_FAILURE,
            error
        }
    }
}

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { getAllUser } from '../../actions/authenticationActions';

class Users extends Component {

    componentWillMount() {
        this.props.getAllUser()
    }
    render() {
        console.info(`users:`, this.props.users)
        const userList = this.props.users.map(user => (
            <tr key={user.id}>
                <td>{user.name}</td>
                <td>{user.username}</td>
                <td>{user.email}</td>
            </tr>
        ));
        if (!userList) {
            return (
                <div>
                    Not Found...
            </div>
            )
        }
        return (
            <div>
                <table className="table">
                    <thead>
                        <tr>
                            <th scope="col">Name</th>
                            <th scope="col">Username</th>
                            <th scope="col">Email</th>
                        </tr>
                    </thead>
                    <tbody>{userList}</tbody>
                </table>
            </div>
        );
    }
}

Users.propTypes = {
    getAllUser: PropTypes.func.isRequired,
};

const mapStateToProps = state => {
    console.info('state', state);
    return {
        users: state.users.items,
        isFetching: state.users.isFetching
    }
};

const mapDispatchToProps = dispatch => {
    return {
        getAllUser: users => dispatch(getAllUser(users))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Users);

import { GETALL_REQUEST, GETALL_SUCCESS, GETALL_FAILURE } from '../actions/types';

const initialState = {
    items: [],
    item: {},
    isFetching: true
}

export default function (state = initialState, action) {
    switch (action.type) {
        case GETALL_REQUEST:
            return {
                ...state,
                isFetching: true,
            };
        case GETALL_SUCCESS:
            return {
                ...state,
                items: action.payload,
                isFetching: false
            };
        case GETALL_FAILURE:
            return {}
        default:
            return state
    }
}

Answer 1

console.info возвращает неопределенное значение, поэтому вы не передаете свой массив обработчику успеха, но не определено

Используйте

.then(res => res.data)

или

.then(res => {console.info(res.data); return res.data;})

См.разница в следующем примере:

var promise = new Promise(function(resolve){
  resolve([1,2,3]);
});

promise.then(res=>{console.info("1 step",res); return res}) //return array
       .then(res=>console.info("2 step", res)) //only log
       .then(res=>console.info("3 step", res)) //ups... res is undefined

Answer 2

попробуйте это:

axios.get('https://jsonplaceholder.typicode.com/users')
    .then(res => dispatch(success(res)))
    .catch(err => dispatch(failure(error)))

Я думаю, что в ответе нет ключа данных!вот почему вы получаете эту ошибку!

Answer 3

Я встроил ваш код в песочницу, и проблема, с которой вы столкнулись, находится внутри вашего действия. Вы не можете выполнять побочные эффекты внутри ваших действий. Redux пожалуется на это:

Чтобы исправить это, у вас есть два варианта:

1. Используйте componentDidMount () Если вам нужно загрузить данные с удаленной конечной точки, это хорошее место для создания экземпляра сетевого запроса.

    componentDidMount() {
        axios
            .get('https://jsonplaceholder.typicode.com/users')
            .then(response => {
                console.log(response.data);
                // this.setState({ response.data });
            })
            .catch(error => {
                console.log(error);
            });
    }

2. Используйте промежуточное программное обеспечение (например, redux-saga, redux-thunk) для обработки ваших побочных эффектов, т.е. ваших запросов get.