Question

我在一个项目中使用react + react-redux和es6（通过babel）有一段简单的代码：

class HomeScreen extends React.Component {
  // problematic piece of code: 
  showLockTimer = setTimeout(this.authenticate, 2000);

  leaveAnimationTimer = setTimeout(() => {
     this.setState({ hide: true }); // setState is correctly called
  }, 1000);

  authenticate = () => { // Never runs.
    // do some stuff...
    this.props.showLock();
  } 
}

由于某种原因，永远不会调用authenticate方法......但是如果我将setTimeout放在类构造函数中，它就可以工作：

class HomeScreen extends React.Component {
  // This is the only changed code:
  constructor(props) {
    super(props);
    this.showLockTimer = setTimeout(this.authenticate, 2000);
  }

  leaveAnimationTimer = setTimeout(() => {
     this.setState({ hide: true }); // setState is correctly called
  }, 1000);

  authenticate = () => { // Now it runs!
    // do some stuff...
    this.props.showLock();
  } 
}

我认为我用箭头函数很好地理解了this绑定，但我不明白为什么会发生这种情况？我试图谷歌这个问题很多，并在SO上阅读类似的问题，但似乎无法找到解释它的任何东西。

很抱歉，如果这是一个重复的问题。

Answer 1

在第一个示例中，您甚至在它存在之前使用this.authenticate。将它包装在另一个箭头函数() => {this.authenticate()}中将使这项工作

箭头函数的行为在ES6 React类构造函数之外

1 个答案: