javascript - 为什么我的 "mapDispatchToProps"看不到我的操作函数？

Question

请告诉我，为什么当我调用 this.props.getOnEvents() 时，会出现“getOnEvents() is not a function”的错误，这里出了什么问题，如何修复？我正在查看console.log，props中有这个函数，但是当我尝试调用时，会弹出一个错误，它不是一个函数

EventCalendar.js

import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import EventCalendarTable from './EventCalendarTable';
import EventCalendarView from './EventCalendarView';

const styles = theme => ({
  root: {
    width: '80%',
    margin: '20px auto 0'
  },
});

class EventCalendar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      viewEvents: 'table'
    };
  }

  componentDidMount() {
    this.props.onGetEvents();
  }

  changeEventsView = (value) => {
    this.setState({ viewEvents: value });
  }

  render() {
    console.log(this.props);
    const { classes } = this.props;
    return (
        <div className={classes.root}>
          <EventCalendarView changeEventsView={this.changeEventsView}/>
          {
            this.state.viewEvents === 'table'
              ? <EventCalendarTable />
              : <div>test</div>
          }

        </div>
    );
  }
}

export default withStyles(styles)(EventCalendar);

EventPage/component.jsx

import React from 'react';
import EventCalendar from '../../components/EventCalendar';
import './index.scss';

function Events(props) {
  return (
    <React.Fragment>
      <EventCalendar props={props}/>
    </React.Fragment>
  );
}

export default Events;

EventPage/container.js

import { connect } from 'react-redux';
import EventsPage from './component';
import { getEvents } from '../../../store/modules/Events/operations';

const mapStateToProps = ({ Events }) => ({
  Events
});

const mapDispatchToProps = dispatch => ({
  onGetEvents: () => {
    console.log(123);

    dispatch(getEvents());
  }
});

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

事件/actions.js

import * as types from './types';

export const eventsFetch = value => ({
  type: types.FETCHING_EVENTS,
  payload: value
});

export const setEvents = ({ objById, arrayIds }) => ({
  type: types.SET_EVENTS,
  payload: {
    eventById: objById,
    eventsOrder: arrayIds
  }
});

事件/types.js

export const FETCHING_EVENTS = 'Events/FETCHING_EVENTS';
export const SET_EVENTS = 'Events/SET_EVENTS';

事件/操作.js

import FetchClient from 'app/utils/FetchClient';
import IdsAndByIds from 'app/utils/IdsAndByIds';
import { eventsFetch, setEvents } from './actions';

export const getEvents = () => async (dispatch) => {
  try {
    const { data } = await FetchClient.get('/events');
    dispatch(setEvents(IdsAndByIds(data)));
    dispatch(eventsFetch(false));
  } catch (error) {
    console.log(error);
  }
};

事件/reducer.js

import { createReducer } from 'store/utils';
import * as types from './types';

const usersInitState = {
  fetching: true,
  events: {
    eventById: null,
    usersOrder: null
  },
  error: null
};

const eventsReducer = createReducer(usersInitState)({
  [types.FETCHING_EVENTS]: (state, { payload }) => ({
    ...state,
    fetching: payload
  }),
  [types.SET_EVENTS]: (state, { payload }) => ({
    ...state,
    events: {
      ...payload
    }
  })
});

export default eventsReducer;

事件/index.js

import { combineReducers } from 'redux';
import * as eventsListOperations from './operations';
import reducer from './reducers';

const EventsReducer = combineReducers({
  eventsList: reducer
});

export default EventsReducer;
export { eventsListOperations };

Answer 1

这里的问题是一个小问题，由于您正在连接要连接的 Events 组件，因此您将在该组件中接收 prop onGetEvents ，现在在该组件中您将通过名称传递 props props 到 EventCalendar 组件

 <EventCalendar props={props}/>

现在，EventCalender 中的 props 将包含一个名为 props 的键，它将拥有您的数据，但您试图直接在 props 上访问它，这就是它未定义的原因.

在这里传递 props 的正确方法是使用扩展语法，例如

 <EventCalendar {...props}/>