componentWillMount内の関数内でアクションを呼び出すと、未定義のプロパティを読み取ることができません

Question

ReactおよびES6の規則にはまったく新しいものです。 componentWillMount()の中にある関数内からアクションを呼び出そうとしています。これはUncaught TypeError: Cannot read property 'signoutUser' of undefinedになります。これを解決する方法がわからない場合は、バインドを試して問題を解決したthisを試してみてください。

現在の形でこの私のコード：

// left_site.js 

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { signoutUser } from '../actions/authentication'; 

export default function(ComposedComponent) { 
    class LeftSite extends Component { 

     constructor(props, context) { 
      super(props, context); 
     } 

     componentWillMount() { 

      var timerLeft = setInterval(timer, 1000); 

      function timer() { 

       if ((sessionStorage.getItem('timer') > 0) && 
        (new Date().getTime() - sessionStorage.getItem('timer') > 5000)) { 
        this.props.signoutUser(); 
       } else { 
        sessionStorage.setItem('timer', new Date().getTime()); 
       } 
      } 
     } 

     render() { 
      return <ComposedComponent {...this.props} /> 
     } 
    } 

    return connect(null, { signoutUser })(LeftSite); 
} 

が起こっているかを説明するには、会社は、彼らがするドメインで保護されたルートのいずれかから離れて移動する場合、ユーザは自動的にログアウトされたいです別のドメイン。 1つのアイデアは、ユーザーがドメイン上の保護されたルート上にいる限り、毎秒sessionStorageに時間を費やした "ハートビート"を作成することでした。アイデアは、最後に保存された時間と現在の時間の差が5000msより大きい場合、別のドメインにナビゲートして戻ってくると自動的にサインアウトします。

これを行うより良い方法があるかもしれませんが、私は1）プライバシーを侵害しなかったか、2）リフレッシュしてログアウトを起動しないと考えることができませんでした。例えば、unbindです。

left_site.jsはHOCある - ので、私の保護されたルートがcomponent={LeftSite(RequireAuth(Home))}に包まれている - 私はまた、誰かが認証なしで保護されたルートにアクセスしようとするとログインページに再ルーティングするrequired_login.js HOCを持っています。

LeftSiteが正常に実行されていますが、条件付きでtrueと評価され、this.props.signoutUser();をトリガーしようとするとエラーが発生します。

Answer 1

機能timerはクラスにバインドされていません。定期的に実行されると、実行コンテキストが変化します。使用する前に関数をバインドする必要があります。また、適切な時に、またはコンポーネントがアンマウントするときに、間隔をクリアすることを確認してください。このように書くことをお勧めします。

timer =() => { 
    if ((sessionStorage.getItem('timer') > 0) && 
     (new Date().getTime() - sessionStorage.getItem('timer') > 5000)) { 
      this.props.signoutUser(); 
    } else { 
     sessionStorage.setItem('timer', new Date().getTime()); 
    } 
} 

componentWillMount() { 
    this.timerLeft = setInterval(this.timer, 1000) 
} 

componentWillUnmount() { 
    clearInterval(this.timerLeft); 
} 

Answer 2

thisをタイマー機能にバインドする必要があります。

export default class MyComponent extends React.Component { 
    componentWillMount() { 
    const timer =() => { 
     console.log(this.props); // should be defined 
    }; 

    const timerLeft = setInterval(timer, 1000); 
    } 
} 

矢印機能と、thisを囲んでいるコンテキストのthisに設定されているので、これは動作します：簡単かつこれを行う方法をお勧めしますが、このように、あなたのタイマーのための矢印関数を定義することです。