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

您可以了解有关此here

的更多信息

组件道具/功能无法在对象内访问

1 个答案: