javascript - 组件属性/函数在对象内不可访问

Question

我有一个 React/Redux 组件，它使用 fullcalendar.io 呈现日历。在 componentDidMount() 中创建日历对象时，它具有我试图操作的某些属性。例如，日历对象有一个名为“eventDrop”的变量，当事件被拖放到新位置时会触发该变量。我正在尝试使用此函数进行 API 调用，以使用我从父类作为 prop 传入的方法来更新数据库。但是，它不允许我访问此函数中的任何 Prop ，并显示错误消息“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()
    }
}

这是我定义 Prop 的父类。

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)
            }

您可以阅读有关此的更多信息 here