Question

React 中函数未定义错误

2017-11-30

3502

javascript reactjs

我试图从 componentDidMount 调用一个函数来设置 State，但一直遇到错误

Uncaught 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 类，我假设您已全部设置完毕。

使用自动绑定 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);   
       })
  }

Answer 2

使用 this.setPanelState(activity) 并记得维护上下文。由于您不是 ES6 箭头函数。保存 var that=this 外部的上下文并访问内部的变量

Answer 3

在您的 componentDidMount 方法中使用 this.setPanelState 调用 setPanelState >

您还可以使用更好的格式：

.subscribe(this.setPanelState)

如果您将 setPanelState 放在类之外并调用它，它将不起作用，除非它在另一个可以使用 setState 的类中定义。