Как исправить проблему с React-Redux (mapDispatchToProps () в Connect () должен возвращать простой объект. Вместо этого получено undefined.) - PullRequest
Новая
       1

Как исправить проблему с React-Redux (mapDispatchToProps () в Connect () должен возвращать простой объект. Вместо этого получено undefined.)

0 голосов
/ 09 марта 2020

Я перенес свое приложение в redux-thunk, и ошибка начала появляться в консоли (mapDispatchToProps () в Connect (UsersContainer) должен возвращать простой объект. Вместо этого он получил undefined.). Но с появлением этой ошибки ничего не изменилось. Как это исправить?

Редуктор: 

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;

Ты все

1 Ответ

0 голосов
/ 09 марта 2020

Ошибка на самом деле довольно прямолинейна, 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(). Где вы выполняете это зависит от ваших требований.

...