Unhandled Rejection (TypeError): dispatch is not a function Redux error

时间:2021-02-22 00:23:50

标签: node.js reactjs react-redux axios sequelize.js

我正在尝试返回与登录用户相关的数据,但我认为我的 Redux Action 和 Reducer 部分有问题。从我可以看到的控制器 API 设置正确,错误消息来自我的操作文件,给出了数据无法加载的错误。

在返回数据方面有什么明显的错误吗?我没有包含我不确定是否相关的减速器文件。我是否必须拥有与此功能相关的特定减速器文件?

这会不会与diveLogTable.component 文件中的mapStateToProps 函数有关?

错误信息

Unhandled Rejection (TypeError): dispatch is not a function
pullUserDiveLogs/<
/sustainable-scuba-web-app/src/actions/divelog.action.js:86
promise callback*pullUserDiveLogs
/sustainable-scuba-web-app/src/actions/divelog.action.js:74
componentDidMount
/sustainable-scuba-web-app/src/components/diveLog/diveLogTable.component.js:43
commitLifeCycles
/sustainable-scuba-web-app/node_modules/react-dom/cjs/react-dom.development.js:20663

后端

diveLog.controller

const db = require("../server/models");
const {Op} = require("sequelize");
const diveLog = db.diveLog;
const User = db.userLogin;

exports.userDiveLog = (req, res) => {

    diveLog.findAll({
        where: {
            [Op.and]: [
                {diverUserNumber: req.params.username},
                //{diveVerifiedBySchool: true}
        ]
        },
    })
        .then((diveLog) => {

            const userDiveLogList = [];
            for (i = 0; i < diveLog.length; i++) {
                userDiveLogList.push(diveLog[i].dataValues);
            }

            if (!diveLog) {
                return res.status(404).send({ message: "No dive logs stored belonging to this individual." });
            }

            res.status(200).send({
                data: userDiveLogList
            });
        })
        .catch((err) => {
            res.status(500).send({ message: err.message });
        });
};

diveLog.routes.js

const { Router } = require("express");
//  const { authJWT } = require("../../middleware");
//  const { divelogAction } = require("../models/divelogAction.model");
const controller = require("../../controllers/diveLog.controller");
//const userController = require("../../controllers/user.controller");

//CRUD
// Creating a post
// Getting all posts
// getting a single post
// updating a post
// deleting a post

module.exports = function(app) {

//  create a dive log
    app.post('/api/divelog/createdivelog', controller.createDiveLog);

// return list of all the dive logs
    app.get('/api/divelog/diveloglist', controller.allDiveLogs);

// return an individual dive log
    app.get('/api/divelog/userdiveloglist', controller.userDiveLog);

};

前端

action.js

import {failed_data_load, failed_reg, set_message, successful_reg} from "./types.action";
import { userDiveLogList, registerDive } from "../services/diveLog.service";
import {diveCurrentFields} from "../services/formFields.service";
import axios from "axios";

// pull the dive log of the user
export const pullUserDiveLogs = (dispatch) => {
    return userDiveLogList().then(
        (response) => {
            return response;
        },
        (error) => {
            const message =
                (error.response &&
                    error.response.data &&
                    error.response.data.message) ||
                error.message ||
                error.toString();

            dispatch({
                type: failed_data_load,
            });

            dispatch({
                type: set_message,
                payload: message,
            });

            return Promise.reject();
        }
    );
}

diveLog.service

import axios from 'axios';

const API_URL = "http://localhost:5002/api/divelog/";

export const userDiveLogList  = () => {
        return axios.get(API_URL + "userdiveloglist");
    };

diveLogTable.js

export class DiveLog extends Component  {

    constructor(props) {
        super(props);
        this.state = {
            userDiveLogList: [],
        };
    }

    componentDidMount() {
        pullUserDiveLogs().then((response) => {
            const { data } = response;
            this.setState({ userDiveLogList: data.data });
        });
    }


    render() {

        const { classes, message } = this.props;

....materialUI table code


function mapStateToProps(state) {
    const { userDiveLogList } = state.message;
    return {
        userDiveLogList,
    };
}

export default compose(
    connect(
        mapStateToProps,
    ),
    withStyles(useStyles),
)(DiveLog);

0 个答案:

没有答案