Redux 动作调用 returns 未定义然后定义

Question

目前正在做一个 React redux 项目。

我能够调用我的操作 fetchProjects() 来处理对服务器的 axios get 请求。

我的代码的问题是，在使用我的项目列表填充我的状态之前，它的控制台日志记录为未定义。

我的目标是在调用渲染函数时在屏幕上渲染我的项目列表。但是当我调用 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)

这里是执行get请求的动作

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'));
            });
    }
}

这里是reducer

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;
}

这是它在我屏幕上的显示方式

Answer 1

问题是你的 redux store 中的 projects 在获取数据之前确实是 undefined。因此，如果projects应该是return一个数组，你应该在初始状态将它设置为一个空数组。

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;
}

编辑： 阅读评论，我认为你想要做的更有可能是这样的：

减速器

const initialState = {
    projects: null
};

组件

render() {
    if (this.props.projects === null) return null; // Or a loading component
    return (
        // Your previous render code here
    );
}

Redux 动作调用 returns 未定义然后定义

Redux action call returns undefined then defined

reactjs

redux

redux-thunk