Question

我收到错误消息，即components / NewTrip.jsx上的this.props.onAddTrip不是函数，并且已经调试了几天。任何帮助表示赞赏！我已将代码包含在NewTrip组件，addTrip容器和我的redux操作中。

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

containers / 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组件中，则应定义函数。

radiusd

尝试一下。还要将this.props.onAddTrip更改为this.props.addTrip（在handleSubmit中），因为那是导入函数的名称。

this.props不是redux connect的函数

1 个答案: