我正在尝试返回与登录用户相关的数据,但我认为我的 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);