javascript - React Redux 从 Api 获取数据是 Null

Question

我正在使用 react 和 redux 从 api 获取数据，但是当我尝试在视图中检索数据时，出现错误：

类型错误：catData 未定义

在我看来，我很难从我的 api 中检索数据，尽管事实上一切都很好。任何关于我做错了什么的建议/关于如何从减速器中检索数据的建议都将受到高度赞赏。

我的观点看起来像这样

import React, { useState, useEffect } from "react";
import { connect} from "react-redux";

// @material-ui/core components
import Loader from 'react-loader-spinner'
import { fetchCategories } from "../../../actions/data"


const mapStateToProps = state => {
    return {
        catData: state.categories

    }
}

const mapDispatchToProps = dispatch => {
    return {
        fetchCategories: () => dispatch(fetchCategories())
    }
}


function CategoriesSection({ catData,fetchCategories}) {

    useEffect(() => {
        fetchCategories();
    }, []);    

  return catData.loading ? (

    <div xs={12} sm={10} md={10} lg={10} style={{marginTop: 10}} > 
        <Loader
            type="Puff"
            color="red"
            height={200}
            width={200}
            style={{ display: "flex",
            justifyContent: "center",
            alignItems: "center" }}
        />
    </div> 
    
    ) 
    
    : catData.error ? (
        <h2> {catData.error} </h2>
    ): (
        <div>

            <div className={classes.title} justify="center">
                    <h2 className={classes.title}>Our Categories</h2>
            </div>

            <div>
                {
                    catData && catData.cat
                }
            </div>

        </div>

    )
 
}

export default connect(mapStateToProps, mapDispatchToProps)(CategoriesSection)

我的减速器看起来像这样：

import {
    
    CATEGORIES_FETCH_REQUEST,
    CATEGORIES_SUCCESS,
    CATEGORIES_FAIL
} from "../actions/types";

const initialState = {
    loading: false,
    categories: [],
    businesses: [],
    error: ''
}

export default function(state = initialState, action) {

    switch(action.type) {

        case CATEGORIES_FETCH_REQUEST: 
            return {
                ...state,
                loading: true
            };

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

        case CATEGORIES_FAIL:
            return {
                loading: false,
                categories: null,
                error: action.payload
            };    

        default:
            return state;
    }
}

我的行为看起来像这样：

import axios from 'axios';
import {
    CATEGORIES_SUCCESS,
    CATEGORIES_FAIL,
    CATEGORIES_FETCH_REQUEST,
} from "./types";

export const fetchCategories = () => {
    return (dispatch) => {
        dispatch(fetchCategoryRequest)

        axios.get('https://api.xxxxxxx.com/api/v1/categories/')
        .then(response => {
            const categories = response.data
            dispatch(fetchCategorySuccess(categories))
        })
        .catch(error => {
            const err = error.message
            dispatch(fetchCategoryFailure(err))
        })
    }
}

const fetchCategoryRequest = () => {
    return {
        type: CATEGORIES_FETCH_REQUEST
    }
}

const fetchCategorySuccess = categories => {
    return {
        type: CATEGORIES_SUCCESS,
        payload: categories
    }
}

const fetchCategoryFailure = err => {
    return {
        type: CATEGORIES_FAIL,
        payload: err
    }
}

标签： javascriptreactjsreact-redux