Как исправить необработанную ошибку типа: не удается прочитать свойство "реквизит" при вызове функции?

Question

У меня есть приложение реагирования, в котором я отправляю информацию в краткой форме.Когда я нажимаю отправить, чтобы вызвать функцию на другой странице.Я получил непогашенный опечатка.Не уверен почему.

Я попытался распечатать реквизит, и я вижу значения, которые я передаю функции в консоли.Так что я знаю, что они там.

    import { bindActionCreators } from 'redux';
    import {withRouter} from 'react-router-dom';
    import history from '../store/store';
    import * as vehicleActions from '../actions/vehicles';


    const AddVehicle = (props, handleSubmit, resetForm) =>{
    let rfidtagInput,vinInput, vehzoneInput, tag, vin, location;
    rfidtagInput=React.createRef();
    vinInput=React.createRef();
    vehzoneInput=React.createRef();

    resetForm=(e)=>{

        document.getElementById("vehForm").reset();
        props.resetFromState();
        }

    handleSubmit=e=>{
        e.preventDefault();
        console.log("what are the props: ", props);
        tag= rfidtagInput.current.value;
        vin=vinInput.current.value;
        location=vehzoneInput.current.value;

                //this line has the error
        this.props.submitVehicle(tag, vin, location);

    }

    return(
            <form id="vehForm" onSubmit={handleSubmit} onReset= 
      {resetForm}>
            <div>
        Please enter information to add vehicle to database.<br/>
    <label>RFIDTAG: </label>
    <input  type="text" name="rfidtag" ref={rfidtagInput} />
    <label>VIN: </label>
    <input  type="text" name="vin" ref={vinInput } /><br/>
    <label>LOCATION: </label>
    <input type="text" name="vehzone" ref={vehzoneInput}  /><br/>

        <button type="submit">Submit</button>
        <button type="reset" onClick={resetForm}>Reset</button>


    </div>

    </form>

    );
      };

    export default AddVehicle;

    import './AddVehicle.css';
    import React from 'react';
    import { connect } from 'react-redux';
    import AddVehicle from './AddVehicle';
    import { Link } from 'react-router';
    import * as vehicleActions from '../actions/vehicles';


     class VehiclePage extends React.Component{
    defaultState = { errors: [], tag: null, vin: null, location: null, 
    message: null, printMsg:null};
     constructor(props){
            super(props);
            this.state=this.defaultState;
            this.submitVehicle=this.submitVehicle.bind(this);
            this.resetFromState=this.resetFromState.bind(this);
            this.validateForm = this.validateForm.bind(this);
              }
     resetFromState= ()=>{
         this.setState({
               ...this.defaultState});
         this.props.vehicleReset("");

     }
         validateForm(tag, vin, location){
         const errors=[];
         if (tag==''){
             errors.push("Please enter vehicle's RFIDTAG.");
         }else if (vin==''){
             errors.push("Please enter the vehicle's VIN.");
         }else if(vin.length<17){
                 errors.push("VIN must be longer than 17 
     characters.");
         }else if(location==''){
             errors.push("Please enter vehicle's location.");
         }
         return errors;
     }

          submitVehicle(tag, vin, location){

           let errors=this.validateForm(tag, vin, location);
             if(errors.length>0){
                 this.setState({errors: errors});
                 console.log("error: ", errors);
                 return;
             }else{

                this.setState({errors: []});
                 var input={
                         rfidtag: tag,
                         vin: vin,
                         vehzone: location
                 };

                this.props.createVehicle(input);
         }
           }

          renderData(message){
              if(message != null){
                  return message;
              }
          }

          render(){
              const {errors} = this.state;
               const printMsg=this.renderData(this.props.message);

              return(
                        <div>
                        <AddVehicle submitVehicle= 
     {this.submitVehicle} resetFromState={this.resetFromState} />
                            <div><font color="red">{errors} 
     </font></div>
                            {printMsg}

                        </div>

                    )
          }
        }
       const mapStateToProps=(state, ownProps) => {
              return{
                  vehicle: state.vehicleReducer.vehicle,
                  message: state.vehicleReducer.message,
                  error: state.vehicleReducer.error
              }
          };

          const mapDispatchToProps=(dispatch)=>{
              return {
                  createVehicle: vehicle => 
        dispatch(vehicleActions.createVehicle(vehicle)),
                  vehicleReset: msg => 
       dispatch(vehicleActions.vehicleReset(msg))
              }
          };


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



    The error I am receiving is: Uncaught TypeError: Cannot read property 
   'props' 
    of undefined at handleSubmit (AddVehicle.js:29)
at HTMLUnknownElement.callCallback (react-dom.development.js:100)
   at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at Object.invokeGuardedCallback (react-dom.development.js:187)
   at Object.invokeGuardedCallbackAndCatchFirstError (react- 
   dom.development.js:201)
   at executeDispatch (react-dom.development.js:461)
    at executeDispatchesInOrder (react-dom.development.js:483)
    at executeDispatchesAndRelease (react-dom.development.js:581)
   at executeDispatchesAndReleaseTopLevel (react-dom.development.js:592)
   at forEachAccumulated (react-dom.development.js:562)

Я не уверен, почему происходит эта ошибка.

Answer 1

На ручке отправки вы ставите this в props, когда оно только props

//this line has the error
props.submitVehicle(tag, vin, location);