如何解决 React-Redux 的问题（Connect() 中的 mapDispatchToProps() 必须返回一个普通对象。而不是收到未定义的。）答案

【问题标题】：How to fix problem with React-Redux(mapDispatchToProps() in Connect() must return a plain object. Instead received undefined.)如何解决 React-Redux 的问题（Connect() 中的 mapDispatchToProps() 必须返回一个普通对象。而不是收到未定义的。）
【发布时间】：2020-03-09 18:47:29
【问题描述】：

我将我的应用程序移植到 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

组件：

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;

大家好

【问题讨论】：

应该不是getTeamApi()，需要调用函数

标签： reactjs redux redux-thunk

【解决方案1】：

这个错误其实很简单，getTeamThunks 应该返回一个 js 对象并且应该是同步的。您可以在动作创建器中执行异步操作。

connect 的第二个参数仅用于将 dispatch 映射到 props（大多数人倾向于这样命名的原因）。

例如，mapDispatchToProps 可以如下所示：

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

现在getTeamthunksData 可以这样写：

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

在您的组件中，您可以使用this.props.getTeamThunks() 调度它。在哪里执行取决于您的要求。

【讨论】：