这在Babel编译的方法中是未定义的

Question

我正在尝试使用React 0.13和ES6语法编写一个小型webapp.我正在使用webpack和babel-loader来编译:

loaders: [
  { test: /\.js/, exclude: /node_modules/, loader: "babel-loader"}
]

我在方法中遇到了这个变量的麻烦,在我的代码中的几个地方都得到了"这是未定义的".例如:

export class PanelEditor extends React.Component {
  ...
  update (){
    if (!this.isMounted())
      return;

    this.setState(this.getStateFromStore());
  }
  ...
}

在这个变量不应该这样的条件下是不确定的.但是,我发现问题可能是Babel重写代码的方式:

update: {
  value: function update() {
    if (!this.isMounted()) {
      return;
    }
    this.setState(this.getStateFromStore());
  }
},

就这样,在我看来,这个变量引用了对象文字而不是类.我怎样才能解决这个问题？

Answer 1

这实际上不是问题所在.这this是未定义的,因为您没有绑定更新功能.

您可以constructor在渲染中或渲染中执行此操作.大多数人都是在渲染中完成的.

<div onClick={this.update.bind(this)} />

或者(我的偏好),保留的箭头功能this.

<div onClick={() => this.update()} />