TypeError：undefined不是一个对象（正在评估'state.postcomics.postscomics'）

Question

我开始使用React-Native，（也为我的英语感到抱歉）。经过几次研究，我找不到解决该问题的方法。而且我无法真正理解这个问题。

import { connect } from 'react-redux';
import  ListComics from '../components/ListComics';
import { fetchPostscomics } from "../action/comics";

const mapStateToProps = state => {
    return {
        comics: state.postcomics.postscomics,
        //loading: state.postcomics.loading

    };
};

const mapDispatchToProps = dispatch => {
    return {
        fetchPostscomics: () => dispatch(fetchPostscomics()),

    };
};

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

减速器：`` 导入{ FETCH_POSTSCOMICS_REQUEST， FETCH_POSTSCOMICS_SUCCESS， FETCH_POSTSCOMICS_FAILURE }来自“ ../ action / comics”；

import {
    ADD_POSTCOMICS_REQUEST,
    ADD_POSTCOMICS_SUCCESS,
    ADD_POSTCOMICS_FAILURE,
} from '../action/addComics';

const initialState = {
    comics: []
};

function postcomics(state = initialState, action) {
    switch(action.type) {
        case FETCH_POSTSCOMICS_REQUEST:
            return { ...state, loading: true };
        case ADD_POSTCOMICS_REQUEST:
            return { ...state, loading: true };
        case FETCH_POSTSCOMICS_SUCCESS:
            return {
                ...state,
                comics: action.payload,
                loading: false
            };
        case ADD_POSTCOMICS_SUCCESS:
            return { comics: [...state.postscomics, action.payload]};

        case FETCH_POSTSCOMICS_FAILURE:
            return { ...state, error: action.payload, loading: false };
        case ADD_POSTCOMICS_FAILURE:
            return { ...state, error: action.payload, loading: false };
        default:
            return state;
    }
}
const store = combineReducers({postcomics});

export default createStore(store, applyMiddleware(thunk));

```代码FectchPostscomics：

export const FETCH_POSTSCOMICS_REQUEST = 'FETCH_POSTSCOMICS_REQUEST';
export const FETCH_POSTSCOMICS_SUCCESS = 'FETCH_POSTSCOMICS_SUCCESS';
export const FETCH_POSTSCOMICS_FAILURE = 'FETCH_POSTSCOMICS_FAILURE';

export function fetchPostscomics() {
    return function (dispatch) {
        dispatch(fetchPostscomicsRequest());
        console.log(process.env.API_URL);
        return fetch('http://192.168.1.23:4000/comics')
            .then(
                response => response.json(),
                error => dispatch(fetchPostscomicsFailure(error))
            )
            .then(postscomics => {
                dispatch(fetchPostscomicsSuccess(postscomics));
            });
    }
}

export function fetchPostscomicsRequest() {
    return {type: FETCH_POSTSCOMICS_REQUEST};
}

export function fetchPostscomicsSuccess(posts) {
    return {type: FETCH_POSTSCOMICS_SUCCESS, payload: { comics: postscomics} };
}

export function fetchPostscomicsFailure(error) {
    return {type: FETCH_POSTSCOMICS_FAILURE, payload: error};
}

Answer 1

您action.payload是一个对象...，您只需要将comics传递给您的状态...而不是整个对象

  case FETCH_POSTSCOMICS_SUCCESS:
                return {
                    ...state,
                    ...action.payload,
                    loading: false
                };

OR

  case FETCH_POSTSCOMICS_SUCCESS:
                return {
                    ...state,
                    comics: action.payload.comics,
                    loading: false
                };

关于访问comics状态：

const mapStateToProps = state => {
    return {
        comics: state.postcomics.comics // <-- Look at this
    };
};

与ADD_POSTCOMICS之类的其他动作相同>