this.props не является функцией с редукционным соединением

Question

Я получаю сообщение об ошибке, что this.props.onAddTrip для компонентов / NewTrip.jsx не является функцией, и я отлаживал это в течение нескольких дней.Любая помощь приветствуется!Я включил код в свой компонент NewTrip, контейнер addTrip и мое действие приставки.

компоненты / NewTrip.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class NewTrip extends React.Component {
    constructor(props) {
    super(props)

    this.state = {
        location: '',
        start: '',
        end: ''
    }

  this.handleInputChange = this.handleInputChange.bind(this)
  this.handleSubmit = this.handleSubmit.bind(this)
  this.handleReset = this.handleReset.bind(this)
}

  handleInputChange(e){
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  handleSubmit(e) {
    e.preventDefault();
    if(this.state.location.trim() && this.state.start.trim() && 
this.state.end.trim()) {
      this.props.onAddTrip(this.state);
      this.handleReset();
    }

  };

  handleReset(){
    this.setState({
      location: '',
      start: '',
      end: ''
    });
  };

  render() {
    return (
      <div className="container">
        <form className="add_trip" onSubmit={ this.handleSubmit }>
          <input name="location" className="start_form" type="text" autocomplete="off" placeholder="   Location" onChange={ this.handleInputChange } value={ this.state.location }/>
      <input name="start" type="date" onChange={ this.handleInputChange } value={ this.state.start }/>
      <input name="end" type="date" onChange={ this.handleInputChange } value={ this.state.end }/>
      <input className="end_form" type="submit" value="Add" />
    </form>
  </div>
)
}
}

export default NewTrip;

контейнеры / addTrip.js

import React from 'react';
import { connect } from 'react-redux';
import { addTrip } from '../actions';
import NewTrip from '../components/NewTrip.jsx';

const mapDispatchToProps = dispatch => {
  return {
    onAddTrip: trip => {
      dispatch(addTrip(trip));
    }
  };
};

export default connect(
  null,
  mapDispatchToProps
)(NewTrip);

actions / index.js

import axios from 'axios';

export const addTrip = ( {location, start, end} ) => {
    return (dispatch) => {
        return axios.post('/api/trips', { location, start, end})
            .then(response => {
                dispatch(addTripSuccess(response.data))
            })
            .catch(error => {
                throw(error)
            })
    }
 }

export const addTripSuccess = data => {
    return {
        type: 'ADD_TRIP',
        payload: {
        // id: data.row.split(",")[0].substring(1),
       id: data._id,
        location: data.location, 
      start: data.start,
      end: data.end
        }
    }
}

Answer 1

Я немного озадачен назначением addTrip.js.Если вы переместите логику в этом файле в ваш компонент NewTrip, ваша функция должна быть определена.

import React from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux'
import { addTrip } from '../actions'

class NewTrip extends React.Component {
    constructor(props) {
    super(props)

    this.state = {
        location: '',
        start: '',
        end: ''
    }

  this.handleInputChange = this.handleInputChange.bind(this)
  this.handleSubmit = this.handleSubmit.bind(this)
  this.handleReset = this.handleReset.bind(this)
}

  handleInputChange(e){
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  handleSubmit(e) {
    e.preventDefault();
    if(this.state.location.trim() && this.state.start.trim() && 
this.state.end.trim()) {
      this.props.addTrip(this.state);
      this.handleReset();
    }

  };

  handleReset(){
    this.setState({
      location: '',
      start: '',
      end: ''
    });
  };

  render() {
    return (
      <div className="container">
        <form className="add_trip" onSubmit={ this.handleSubmit }>
          <input name="location" className="start_form" type="text" autocomplete="off" placeholder="   Location" onChange={ this.handleInputChange } value={ this.state.location }/>
      <input name="start" type="date" onChange={ this.handleInputChange } value={ this.state.start }/>
      <input name="end" type="date" onChange={ this.handleInputChange } value={ this.state.end }/>
      <input className="end_form" type="submit" value="Add" />
    </form>
  </div>
)
}
}

export default connect(null, { addTrip })(NewTrip);

Попробуйте.Также изменил this.props.onAddTrip на this.props.addTrip (в handleSubmit), так как это имя импортированной функции.