Redux 操作调用返回未定义然后定义

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)

这是执行获取请求的操作

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

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

Answer 1

问题是你的 redux 存储中的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;
}

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

减速器

const initialState = {
    projects: null
};

组件

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