Javascript React Rails bind不返回函数

我正在开发我的应用程序。当我试图在jQuery ajax调用中绑定我的函数时，它总是说

uncaughttypeerror:this.addNewAppointment不是一个函数

这是我完整的

约会.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_time: 'When would this happen?'
        };

        this.handleUserInput = this.handleUserInput.bind(this);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
        this.addNewAppointment = this.addNewAppointment.bind(this);
    }

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

    handleFormSubmit(){
        let appointment = JSON.stringify({ 
            title: this.state.title, 
            appointment_time: this.state.appointment_time 
        });

        $.ajax({
            url: '/appointments',
            type: "POST",
            data: appointment, 
            contentType: 'application/json',
            success: function(data){
                this.addNewAppointment(data)
            }
        });
    }

    addNewAppointment(appointment){
        let appointments = React.addons.update(this.state.appointments, { $push: [appointment] } );
        this.setState({ appointments: appointments.sort((a, b) => (new Date(a.appointment_time) - new Date(b.appointment_time))
        )})
    }

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

export default Appointments;

在ajax调用中，我尝试调用

addNewAppointment

函数：

$.ajax({
    url: '/appointments',
    type: "POST",
    data: appointment, 
    contentType: 'application/json',
    success: function(data){
        this.addNewAppointment(data)
    }
});

但当我尝试添加新项目时，出现以下错误：

Appointments.jsx:38 Uncaught TypeError: this.addNewAppointment is not a function
        at Object.success (Appointments.jsx:38)
        at fire (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3233)
        at Object.fireWith [as resolveWith] (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3363)
        at done (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:9841)
        at XMLHttpRequest.callback (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:10312)

---

知道我做错了什么吗？

您正在绑定方法

addNewAppointment

，这样每次调用它时，执行上下文（即

this

的值）都将是

appointment

实例

这将保证，无论如何调用该方法，您都能够访问

This.state.appointment

并在

addNewAppointment

方法内调用

This.setState

但该绑定并不保证每次尝试使用

this.addNewAppointment

调用方法时，

this

的值都将是组件实例。在本例中，当调用

$.ajax

时，将创建一个新的执行上下文：

$.ajax({
    url: '/appointments',
    type: "POST",
    data: appointment, 
    contentType: 'application/json',
    success: function(data){
        this.addNewAppointment(data)
    }
});

执行上下文（this的值）不是组件实例。要解决这个问题，您可以做两件事：

将成功回调定义为一个箭头函数，该函数继承父执行上下文：

当您知道执行上下文是组件实例时存储它，然后使用该引用：

$.ajax({
    url: '/appointments',
    type: "POST",
    data: appointment, 
    contentType: 'application/json',
    success: function(data){
        this.addNewAppointment(data)
    }
});

$.ajax({
    url: '/appointments',
    type: "POST",
    data: appointment, 
    contentType: 'application/json',
    success: data => {
        this.addNewAppointment(data)
    }
});

handleFormSubmit() {
    const self = this;
    const appointment = JSON.stringify({ 
        title: this.state.title, 
        appointment_time: this.state.appointment_time 
    });

    $.ajax({
        url: '/appointments',
        type: "POST",
        data: appointment, 
        contentType: 'application/json',
        success: function(data){
            self.addNewAppointment(data)
        }
    });
}