React报错‘Cannot read property 'bind' of undefined’求助

首先我把你提供的代码片段整理清晰，方便分析问题：

userInputActions.js #

export function dummy() {
  console.log('dummy function called');
}

userInputPage.js #

import * as userInputActions from '../actions/userInputActions';

class UserInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { };
    // 取消注释后显示已导入'dummy()'
    // console.log('actions: ', userInputActions);
    this.dummy = this.dummy.bind(this);
  }

  // 此处未定义组件自身的dummy方法
  // ... 你的其他代码
}

从你的描述和代码来看，导入本身是正常的（注释的console语句已经能证明这一点），问题出在你没有正确使用这个导入的dummy函数。下面给你两种常见的解决方式：

• 直接调用导入的函数：如果不需要把它作为组件的实例方法（比如只是在某个逻辑里触发），直接在需要的地方调用userInputActions.dummy()就行，比如：

handleSomeEvent() {
  // 直接调用导入的action函数
  userInputActions.dummy();
}

• 绑定为组件实例方法：如果需要把它作为JSX的事件处理函数（比如onClick={this.dummy}），你需要把导入的函数关联到组件实例上，修改constructor里的代码：

constructor(props) {
  super(props);
  this.state = { };
  // 把导入的dummy函数绑定到组件实例，而非绑定一个不存在的this.dummy
  this.dummy = userInputActions.dummy.bind(this);
}

或者用更简洁的类字段语法（无需手动绑定）：

class UserInput extends React.Component {
  // 直接把导入的函数赋值为类字段
  dummy = userInputActions.dummy;

  constructor(props) {
    super(props);
    this.state = { };
  }

  // ... 其他代码
}

简单来说，你之前的this.dummy = this.dummy.bind(this)是在绑定一个组件自身未定义的方法，而不是你导入的那个dummy函数，这就是问题的核心啦！

内容的提问来源于stack exchange，提问作者Edv Beq