如何修复React Redux的问题(Connect()中的mapDispatchToProps()必须返回一个普通对象

Question

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

Ty所有

Answer 1

错误实际上非常直接，getTeamThunks应该返回一个js对象，并且应该是同步的。您可以在动作创建者中执行异步操作。

连接的第二个参数只是用于将调度映射到道具(这就是为什么大多数人倾向于这样命名它的原因(。

例如，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()来调度它。在哪里执行取决于您的需求。