Компонент реквизиты / функции не доступны в объекте

Question

У меня есть компонент React / Redux, который отображает календарь с использованием fullcalendar.io. При создании объекта календаря в componentDidMount () у него есть определенные свойства, которыми я пытаюсь манипулировать. Например, у объекта календаря есть переменные с именем «eventDrop», которые запускаются, когда чётное изображение перетаскивается в новое место. Я пытаюсь использовать эту функцию, чтобы вызвать API для обновления базы данных, используя метод, который я передал в качестве поддержки от моего родительского класса. Тем не менее, он не позволяет мне получить доступ к любому реквизиту в этой функции, сообщая об ошибке «SCRIPT5007: невозможно получить свойство updateShift с неопределенной или нулевой ссылкой». Он не позволяет мне даже вызывать какую-либо функцию в моем компоненте, заявляя: «SCRIPT438: объект не поддерживает свойство или метод« fetchData ».»

export default class Index extends React.Component {
   //constructor()…

    componentDidMount() {

        var calendarEl = document.getElementById('calendar')
        var calendar = new Calendar(calendarEl, {
            //Variables....

            eventDrop: function(info) {
                 // In this function, I cannot access state, props, or any other functions in the component
                 //CAUSING THE ERROR!
                this.props.updateShift(shift)
            }
        })
        calendar.render()
    }
}

А вот родительский класс, в котором я определяю реквизит.

export class VolunteerScheduling extends React.Component {
   //Constructor & other functions...


  render() {
    return (
                <Index
                  volunteers={this.props.volunteers}
                  getVolunteer={this.props.getVolunteer}
                  updateShift={this.props.updateShift}
                />
)}
const mapStateToProps = state => ({

  volunteers: selectors.volunteer.getAll(state),
  getVolunteer: selectors.volunteer.getOne(state)
})

const mapDispatchToProps = dispatch => ({
  updateShift: (shift) => dispatch(updateShift(shift))
})

Answer 1

Используйте функцию стрелки, когда вы пытаетесь получить доступ к области действия этого:

eventDrop:(info) => {
                 // Now you can access this.props or this.state here

                this.props.updateShift(shift)
            }

Подробнее об этом можно прочитать здесь