Реагируйте Redux this.props.getClasses не является функцией - PullRequest
Новая
       6

Реагируйте Redux this.props.getClasses не является функцией

0 голосов
/ 13 июня 2018

Я пытаюсь передать действие с mapDispatchToProps компоненту, когда я пытаюсь использовать getClasses как this.props.getClasses ().Я получаю Сбой типа проп: проп getClasses помечен как обязательный в HierarchySelect, но его значение равно undefined. , а в компоненте 'section' происходит сбой при TypeError:this.props.getClasses не является функцией 

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

const { Fragment } = React;
export class HierarchySelect extends Component {
  constructor (props) {
    super(props);
    this.state = {
      sections: [],
      section: '--',
    };
  }

  handleChange (value, type, error) {
    switch (type) {
      case 'section':
        this.setState({
          section: value
        });
        this.props.getClasses({ type: '', data: '' });
        break;
      default:
    }
  }

  render () {
    return (
      <Fragment>
        <select id="lang" className="section" onChange={e => this.handleChange(e.target.value, 'section')} value={this.state.section}>
          {['--', ...this.state.sections].map(d => <option key={d} value={d}>{d}</option>)}
        </select>
      </Fragment>
    );
  }
}

HierarchySelect.propTypes = {
  deptHierarchy: PropTypes.object.isRequired,
  createHierarchy: PropTypes.func.isRequired,
  id: PropTypes.number.isRequired,
  getClasses: PropTypes.func.isRequired
};

export const mapStateToProps = (state, props) => ({
  user: state.getUser
});

export const mapDispatchToProps = dispatch => ({

  getClasses: (data) => {
    dispatch(data);
  }

});

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

Ответы [ 2 ]

0 голосов
/ 13 июня 2018

В mapDispatchToProps вы не возвращаете отправку в getClasses.Вам нужно написать это как 

export const mapDispatchToProps = dispatch => ({
    getClasses: (data) => {
       return dispatch(data);
    }
});

или 

export const mapDispatchToProps = dispatch => ({
  getClasses: (data) => dispatch(data);
});

Также вам нужно импортировать подключенный компонент, который является экспортом по умолчанию в вашем случае 

import HierarchySelect  from './hierarchy-dropdowns';
0 голосов
/ 13 июня 2018

handleChange не привязан к компоненту this instance. Итак, вы получаете props как неопределенное.

Определите handleChange с

Arrow function, которые lexical this связывают. 

handleChange = (value, type, error) =>{
            this.props.getClasses();
        }
      }

ИЛИ

В конструкторе делают this связывание с bind: 

constructor(){

   this.handleChange = this.handleChange.bind(this);
}
...