javascript - React 中的函数未定义错误

Question

我正在尝试从 componentDidMount 调用一个设置状态的函数，但不断遇到错误

未捕获的 ReferenceError:setPanelState 未定义

下面是代码...

export default class Patient extends React.Component {
  constructor(props) {
    super(props);
    autoBind(this);

    this.state = {
     PATIENT: [],
     COMPPROPS: [],
    };

    this.setPanelState = this.setPanelState.bind(this);
  }

    setPanelState(activity) {
          this.setState({COMPPROPS: [{compName:'Overview', compState:'Edit'}]});
    }

    componentDidMount() {   
       //handles chat commands and if the command is update patient the Overview panel should change to editable
       this.directLine.activity$
        .filter(function (activity) {
          return activity.type === 'event' && activity.value === 'Update Patient';
       })
       .subscribe(function (activity) {
         setPanelState(activity);   
       })
  }

我曾尝试让 setPanelState 成为类之外的函数而不是方法，但我也在那里遇到错误。

有什么想法吗？

Answer 1

由于您使用的是 ES6 类，因此我假设您已全部设置好。

使用自动绑定(bind) this 的箭头函数

要了解有关箭头函数的更多信息，请参阅 this

.subscribe((activity) => {
    this.setPanelState(activity);   
})

你的组件看起来像这样:

 export default class Patient extends React.Component {
  constructor(props) {
    super(props);
    autoBind(this);

    this.state = {
     PATIENT: [],
     COMPPROPS: [],
    };

    this.setPanelState = this.setPanelState.bind(this);
  }

    setPanelState(activity) {
          this.setState({COMPPROPS: [{compName:'Overview', compState:'Edit'}]});
    }

    componentDidMount() {   
       //handles chat commands and if the command is update patient the Overview panel should change to editable
       this.directLine.activity$
        .filter((activity) => {
          return activity.type === 'event' && activity.value === 'Update Patient';
       })
       .subscribe((activity) => {
         this.setPanelState(activity);   
       })
  }