Reactjs React Redux TypeError-不是函数

我正在尝试同时使用

React

和

Redux

来管理我的应用程序状态。我试图从我的操作中调用一个方法（

SprintActions

），但我一直收到错误

TypeError:props.getAllSprints不是一个函数

你能告诉我我做错了什么吗

我的主要组件是

Sprint

组件，它导入

SprintActions

import * as types from "../constants/ActionTypes";
import Axios from "axios";

export const getSprints = () => {
    console.log("get sprints");
    return (dispatch) => {
        Axios.get("http://127.0.0.1:5000/sprints").then((response) => {
            const sprintData = response.data;
            dispatch(getAllSprints(sprintData));
        });
    };
};

export const getAllSprints = (data) => ({
    type: types.GET_SPRINTS,
    data: data,
});

这是我的

Sprint

组件

import React, { useEffect } from "react";
import { getSprints } from "./sprintActions";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

export const Sprint = (props) => {

    useEffect(() => {
        props.getAllSprints();
    }, []);


    return (
        <div style={{ zIndex: 1 }}>
            {sprints &&
                sprints.map((s) => (
                <p>{s.id}</p>
                ))}

        </div>
    );
};
Sprint.propTypes = {
    getAllSprints: PropTypes.func,
};

const mapStateToProps = (state) => ({
    sprints: state.sprints,
});

const mapDispatchToProps = (dispatch) => ({
    getAllSprints: bindActionCreators(getSprints, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(Sprint);

---

感谢您的时间和耐心。

您在这里试图实现的目标应该通过使用

redux-thunk

（发送api请求）或

redux-sagas

（在imo中稍微复杂一点）来实现。 你可以阅读，这是非常有帮助的

您的问题是

getSprints

操作没有返回属性（类型，…负载）为的对象。如果您使用getAllSprints操作，您将看到它将起作用

也检查

---

我希望这有帮助

bindActionCreators

用于将分派功能传递到商店不知道的组件中，因为您在

connect

内部使用

mapDispatchToProps

根本不需要它（无论如何，您实现它的方式有点错误，欢迎查看文档）

只需使您的mapDispatch尽可能基本：

---

---

# 编辑

您可以将检查程序添加到

useffect

中，使

getAllSprint

是函数（这一行在Redux上下文设置后执行），并添加

[props[getAllSprint]]

依赖项，以便在未设置的情况下再次运行效果

---

---

如果您有多个操作，并且希望绑定它们，那么您只需执行以下操作

import * as sprintActions from "./sprintActions";

export const Sprint = (props) => {
    useEffect(() => {
        props.sprintActions.getSprints();
    }, []);
    ...
};

const mapDispatchToProps = (dispatch) => ({
    sprintActions: bindActionCreators(sprintActions, dispatch),
});

否则，您需要按照其他答案中的建议手动呼叫调度：

export const Sprint = (props) => {
    useEffect(() => {
        props.getAllSprints();
    }, []);
    ...
};

 const mapDispatchToProps = (dispatch) => ({
     getAllSprints: () => dispatch(getSprints()),
 });

---

您已经在

SprintActions

中定义了

getallsprint

，并且在

bindActionCreators

中声明了相同的内容。对吗？我认为一些命名不匹配正在发生。这是正确的吗<代码>从“/sprintActions”导入{getSprints}不应该是从“/SprintActions”导入{getSprints}import * as sprintActions from "./sprintActions"; export const Sprint = (props) => { useEffect(() => { props.sprintActions.getSprints(); }, []); ... }; const mapDispatchToProps = (dispatch) => ({ sprintActions: bindActionCreators(sprintActions, dispatch), });

export const Sprint = (props) => {
    useEffect(() => {
        props.getAllSprints();
    }, []);
    ...
};

 const mapDispatchToProps = (dispatch) => ({
     getAllSprints: () => dispatch(getSprints()),
 });