javascript - React-Rails 未捕获类型错误 : Cannot read property 'title' of undefined

Question

我在 Appointments.jsx 文件上创建了一个 handleFormSubmit 函数，并在那里定义了一个对象来保存我的 title 和 appointment_date 状态。

Appointements.jsx:

import React from 'react';
import Appointment from './Appointment';
import AppointmentForm from './AppointmentForm';
import AppointmentsList from './AppointmentsList';

class Appointments extends React.Component {

   constructor(props) {
     super(props)

     this.state = {
       appointments: this.props.appointments,
       title: 'Put your event title',
       appointment_date: 'When would this happen?'
    };

    this.handleUserInput = this.handleUserInput.bind(this)


   }

   handleUserInput(obj_value){
    this.setState(obj_value);
  }

  handleFormSubmit(){
    let apppointment = { 
      title: this.state.title, 
      appointment_date: this.state.appointment_date 
    };

       $.ajax({
           type: "POST",
            url: '/appointments',
            data: { apppointment }, 
            success: function(data){
              console.log(data); 
            }
          });
  }


   render(){
     return(
      <div>
        <AppointmentForm title={this.state.title} 
         appointment_date={this.state.appointment_date} 
         onUserInput={this.handleUserInput}
         onFormSubmit={this.handleFormSubmit}
         />
        <AppointmentsList appointments={this.props.appointments} />
     </div>
     )
   }
}

export default Appointments;

我在我的 AppointmentsForm.jsx 文件中传递了这个函数:

import React from 'react';

class AppointmentForm extends React.Component{

    handleChange = e => {
        let name = e.target.name;
        const obj_value = {};
        obj_value[name] = e.target.value;
        this.props.onUserInput(obj_value);
    }

    handleSubmit = e => {
        e.preventDefault();
        this.props.onFormSubmit();
    }

    render(){
        return(
            <div>
                <h2>Make a new appointment</h2>
                <form onSubmit={this.handleSubmit}>
                    <input name='title' 
                     value={this.props.title} 
                     onChange={this.handleChange} />

                    <input name='appointment_date' 
                    value={this.props.appointment_date} 
                    onChange={this.handleChange} />

                    <input type='submit' value='Make Appointment' />
                </form>
            </div>
        )
    }
}

export default AppointmentForm;

我希望我的 ajax 代码将通过帖子提交此内容，并至少将控制台日志作为成功衡量标准。不幸的是我收到了这个错误:

Uncaught TypeError: Cannot read property 'title' of undefined
    at Object.handleFormSubmit [as onFormSubmit] (Appointments.jsx:28)
    at AppointmentForm._this.handleSubmit (AppointmentForm.jsx:14)
    at HTMLUnknownElement.callCallback (react-dom.development.js:191)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:240)
    at invokeGuardedCallback (react-dom.development.js:293)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:308)
    at executeDispatch (react-dom.development.js:393)
    at executeDispatchesInOrder (react-dom.development.js:418)
    at executeDispatchesAndRelease (react-dom.development.js:3303)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3312)
handleFormSubmit @ Appointments.jsx:28
AppointmentForm._this.handleSubmit @ AppointmentForm.jsx:14
callCallback @ react-dom.development.js:191
invokeGuardedCallbackDev @ react-dom.development.js:240
invokeGuardedCallback @ react-dom.development.js:293
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:308
executeDispatch @ react-dom.development.js:393
executeDispatchesInOrder @ react-dom.development.js:418
executeDispatchesAndRelease @ react-dom.development.js:3303
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3312
forEachAccumulated @ react-dom.development.js:3284
runEventsInBatch @ react-dom.development.js:3329
runExtractedPluginEventsInBatch @ react-dom.development.js:3539
handleTopLevel @ react-dom.development.js:3583
batchedEventUpdates$1 @ react-dom.development.js:21731
batchedEventUpdates @ react-dom.development.js:800
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3593
attemptToDispatchEvent @ react-dom.development.js:4313
dispatchEvent @ react-dom.development.js:4234
unstable_runWithPriority @ scheduler.development.js:661
runWithPriority$1 @ react-dom.development.js:11079
discreteUpdates$1 @ react-dom.development.js:21748
discreteUpdates @ react-dom.development.js:813
dispatchDiscreteEvent @ react-dom.development.js:4213

我确实在约会对象中检查了我的title并且定义正确。

我想知道我在这里做错了什么？

Answer 1

您需要修复 handlFormSubmit 函数的绑定(bind)，或者将其绑定(bind)在构造函数中

this.handlFormSubmit = this.handlFormSubmit.bind(this)

或者使用箭头功能

handlFormSubmit () => {
  // your code here
}

Demo