Вызов действия Redux возвращает неопределенное значение, а затем определенное

в настоящее время работает над проектом React Redux.

Я смог вызвать свое действие fetchProjects() для обработки запроса axios get на сервер.

Проблема с моим кодом заключается в том, что он регистрируется в консоли как undefined, прежде чем заполнять мое состояние моим списком проектов.

Моя цель - отобразить список проектов на экране при вызове функции рендеринга. Но компонент аварийно завершает работу, поскольку он отображается неопределенным, когда я вызываю this.props.projects.

Вот компонент, который вызывает действие fetchProjects.

import React, { Component } from 'react';
import Searchbar from '../../vp-ui/vp-searchbar/vp-searchbar.component.js';
import { connect } from 'react-redux';
import * as actions from '../../vp-services/projects/actions';
require('./vp-genecart.component.scss');

class GeneCart extends Component {

    constructor(props) {
        super(props);
        this.state        = { projects: [] };
        this.props.fetchProjects();
    }

    render() {
        console.log("h1", this.props.projects);
        return (
            <div>
                hello
            </div>
        )
    }
}

function mapStateToProps(state) {
    return {
        projects: state.projects.projects
    };
}

export default connect(mapStateToProps, actions)(GeneCart)

Вот действие, которое выполняет запрос на получение

import axios from 'axios';
import history from '../../history';
import instance from '../instance';
import {
    PROJECTS_FETCH,
    PROJECTS_ERROR
} from './types';

export function fetchProjects() {
    return function(dispatch) {
        instance.get(
            `api/projects/`,
            {
                withCredentials: true
            }
        ).then((response) => {
                var projects = response.data.results;
                dispatch({
                    type: PROJECTS_FETCH,
                    payload: projects
                });
            })
            .catch((error) => {
                dispatch(projectsError('Couldn\'t get projects'));
            });
    }
}

Вот редуктор

import {
    PROJECTS_FETCH,
    PROJECTS_ERROR
} from './types';

export default function(state={}, action) {
    switch(action.type) {
        case PROJECTS_FETCH:
            return { ...state, projects: action.payload };
        case PROJECTS_ERROR:
            return { ...state, error: action.payload };
    }

    return state;
}

Вот как это отображается на моем экране введите здесь описание изображения


reactjs redux redux-thunk
person Shaun Chua    schedule 16.10.2017    source источник
comment
Можете ли вы добавить свой код редуктора?   -  person WorldSEnder    schedule 16.10.2017
comment
Ага, где этот редуктор   -  person WilomGfx    schedule 16.10.2017
comment
@WorldSEnder обновлен   -  person Shaun Chua    schedule 16.10.2017
comment
@WilomGfx обновлено   -  person Shaun Chua    schedule 16.10.2017

Ответы (1)


arrow_upward
1
arrow_downward

Проблема в том, что projects в вашем хранилище избыточности действительно равно undefined до того, как данные будут получены. Поэтому, если предполагается, что projects возвращает массив, вы должны установить его в пустой массив в начальном состоянии.

const initialState = {
    projects: []
};

export default function(state = initialState, action) {
    switch(action.type) {
        case PROJECTS_FETCH:
            return { ...state, projects: action.payload };
        case PROJECTS_ERROR:
            return { ...state, error: action.payload };
    }

    return state;
}

EDIT: читая комментарий, я думаю, что вы хотите сделать что-то вроде этого:

редуктор

const initialState = {
    projects: null
};

компонент

render() {
    if (this.props.projects === null) return null; // Or a loading component
    return (
        // Your previous render code here
    );
}
person Bill    schedule 16.10.2017
comment
когда я пытаюсь отобразить свои проекты на экране, он все еще читается как неопределенный. ‹div›{this.props.projects[0].name‹/div› ошибка читается как невозможность прочитать имя свойства неопределенного - person Shaun Chua; 16.10.2017