Question

请告诉我为什么，当我调用this.props.getOnEvents（）时，会出现“ getOnEvents（）不是函数”的错误，这是怎么回事以及如何解决？我正在查看console.log，并且道具中有此功能，但是当我尝试调用该功能时，错误提示它不是功能

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);

Events / 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
  }
});

Events / types.js

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

Events / operation.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);
  }
};

Events / 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;

Events / 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

这里的问题是一个小问题，由于您正在连接要连接的事件组件，因此您在该组件中收到了道具onGetEvents，现在在该组件内部您正在通过名称{{1}传递道具}到EventCalendar组件

props

现在<EventCalendar props={props}/>中的道具将包含一个名为EventCalender的键，该键将拥有您的数据，但是您尝试直接在道具上访问它，这就是为什么它未定义的原因。

在此处传递道具的正确方法是使用传播语法，例如

props

为什么我的“ mapDispatchToProps”看不到我的动作函数？

1 个答案: