Reactjs 如何修复React-Redux的问题（Connect（）中的mapDispatchToProps（）必须返回普通对象，而不是未定义的接收。）

我将应用程序移植到redux thunk，错误开始出现在控制台中( Connect（UsersContainer）中的mapDispatchToProps（）必须返回普通对象，而不是未定义的对象。）。 但随着这一错误的出现，一切都没有改变。如何修复它

减速器：

import {getTeamApi} from "./api";

let date = {
    teamDate: []
};
const realtorsDate = (state = date, action) => {
    switch (action.type) {
        case "GetTeam":
            return {...state, teamDate: [...state.teamDate, ...action.team]};
        default:
            return state
    }
}
export let GetTeam = (team) => ({
    type: "GetTeam",
    team
})
export default realtorsDate;
export const getTeamThunks = () => {
    return (dispatch) => {
        getTeamApi.then(response => {
            dispatch(GetTeam(response.items));
        });
    }
}

容器组件：

import {connect} from "react-redux";
import {getTeamThunks} from "../../store/realtorsDate";
import ScrollableAnchor from "react-scrollable-anchor";
import MainFourth from "./main-fourth";
import Photo from "../../Images/pivo-3.jpg";
import React from "react";

class UsersContainer extends React.Component {

    render() {
        return (
            <section>
                <ScrollableAnchor id={"team"}>
                    <h2>Наша команда</h2>
                </ScrollableAnchor>
                <div className="MainFourth">
                    {this.props.realtorsDate.map((el, i) => (
                        <MainFourth key={i} el={el} Photo={Photo}></MainFourth>))}
                </div>
            </section>
        );
    }
}

let MapStateToProps = (state) => {
    return {
        realtorsDate: state.realtorsDate.teamDate
    }
}
let FourthContainerBlock = connect(MapStateToProps, getTeamThunks)(UsersContainer)
export default FourthContainerBlock

从“react redux”导入{connect}；
从“./../store/realtorsDate”导入{getTeamThunks}”；
从“react scrollable anchor”导入ScrollableAnchor；
从“/main fourth”导入main fourth；
从“../../Images/pivo-3.jpg”导入照片；
从“React”导入React；
类UsersContainer扩展了React.Component{
render（）{
返回(
Наша команда
{this.props.realtorsDate.map（（el，i）=>(
))}
);
}
}
让MapStateToProps=（状态）=>{
返回{
realtorsDate:state.realtorsDate.teamDate
}
}
let FourthContainerBlock=connect（MapStateToProps，getTeamThunks）（UsersContainer）
导出默认的FourthContainerBlock

组成部分：

import React from "react";
import "./../../css/App.css";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faAt, faMobileAlt} from "@fortawesome/free-solid-svg-icons";
class MainFourth extends React.Component {
  render() {
    return (
        <div className="team" key={this.props.i}>
            <div className="about-team">
                <h2 className="team-name">
                    {this.props.el.SecondName}&nbsp;
                    {this.props.el.Name}
                </h2>

                <h2 className="team-position">{this.props.el.Position}</h2>
                <p><FontAwesomeIcon icon={faMobileAlt}></FontAwesomeIcon> : {this.props.el.Phone}</p>
                <p><FontAwesomeIcon icon={faAt}></FontAwesomeIcon> : {this.props.el.Mail}</p>
            </div>
            <img className="TeamsPhoto" src={this.props.Photo} alt="" />
        </div>
    );
  }
}
export default MainFourth;

从“React”导入React；
导入“/../../css/App.css”；
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}”；
从“@fortawesome/free solid svg icons”导入{faAt，faMobileAlt}”；
类main扩展了React.Component{
render（）{
返回(
{this.props.el.SecondName}
{this.props.el.Name}
{this.props.el.Position}
：{this.props.el.Phone}

：{this.props.el.Mail}

);
}
}
出口违约；

---

tyall

这个错误实际上非常简单，

getTeamThunks

应该返回一个js对象，并且应该是同步的。您可以在action creators中执行异步操作

connect的第二个参数只是用来将分派映射到props（这就是大多数人倾向于将其命名为props的原因）

例如，

mapDispatchToProps

可以如下所示：

const mapDispatchToProps = (dispatch) => {
  return {
    getTeamThunks: () => dispatch(actions.getTeamThunksData())
  }
}
let FourthContainerBlock = connect(MapStateToProps, mapDispatchToProps)(UsersContainer)

export const getTeamThunksData = () => {
    return (dispatch) => {
        getTeamApi.then(response => {
            dispatch(GetTeam(response.items));
        });
    }
}

现在可以这样编写

getTeamthunksData

：

const mapDispatchToProps = (dispatch) => {
  return {
    getTeamThunks: () => dispatch(actions.getTeamThunksData())
  }
}
let FourthContainerBlock = connect(MapStateToProps, mapDispatchToProps)(UsersContainer)

export const getTeamThunksData = () => {
    return (dispatch) => {
        getTeamApi.then(response => {
            dispatch(GetTeam(response.items));
        });
    }
}

---

在组件中，可以使用

this.props.getTeamThunks（）

来分派它。执行它的位置取决于您的需求。

是否应该是

getTeamApi（）

，您需要调用该函数