動作は、クラスコンストラクタ

Question

に反応私が使用してプロジェクト内のコードの単純な部分を有する反応-ReduxのES6と（バベルを通じて）+反応：

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(); 
    } 
} 

何らかの理由でメソッドが呼び出されることはありません認証...しかし、私はクラスのコンストラクタの内部での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を理解と思ったが、私はその理由を理解することはできませんしない彼は起こる？私はこの問題のためにたくさんのGoogleを試みましたが、同様の質問を読んでいましたが、それを説明するものは何も見つかりませんでした。

申し訳ありませんが重複した質問です。

Answer 1

最初の例では、それが存在する前にthis.authenticateを使用します。別の矢印の関数にラップする() => {this.authenticate()}