reactnative/js BackgroundTimer を 条件下でとめたい

Question

前提・実現したいこと

appstate の状態が変化するたびに 呼び出した、
BackgroundTimer を nextAppState === 'active' の時のみとめたいです。

BackgroundTimer.setTimeout() → BackgroundTimer.clearTimeout()

発生している問題・エラーメッセージ

nextAppState === 'active' の時のみ clearTimeout を実現したいのですが、できません。

該当のソースコード

class test extends React.Component {
  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
  }
  componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }

  _handleAppStateChange = nextAppState => {
    console.log(AppState);

    const backTimer = BackgroundTimer.setTimeout(() => {
      console.log('1分');
    }, 60000);

    //動くがどの appstate の場合も止まる
     // const stopTimer = BackgroundTimer.clearTimeout(backTimer);
     // BackgroundTimer.clearTimeout(backTimer);

    //BackgroundTimer.clearTimeout(backTimer); が機能しない
     // const stopTimer = nextAppState === 'active'
     //     ? BackgroundTimer.clearTimeout(backTimer)
     //     : console.log('non active');

    if (nextAppState === 'active') {
　　　　//BackgroundTimer.clearTimeout(backTimer); //この位置だと機能しない
      console.log('Foregound mode');
    }

    if (nextAppState === 'inactive') {
      console.log('Inactive mode');
    }

    if (nextAppState === 'background') {
      console.log('Backgound mode');
    }
  };

試したこと

BackgroundTimer.clearTimeout(backTimer); が機能しない
※1 の位置に　console.log() は出力される

const stopTimer = nextAppState === 'active'
 ? BackgroundTimer.clearTimeout(backTimer) //※1
 : console.log('non active');

この位置だと機能しない

if (nextAppState === 'active') {
 BackgroundTimer.clearTimeout(backTimer); //この位置だと機能しない
 console.log('Foregound mode');
}

補足情報（FW/ツールのバージョンなど）

react-native-background-timer：2.3.1

Answer 1

const backTimer = BackgroundTimer.setTimeout(() => {
  console.log('1分');
}, 60000);

これだと_handleAppStateChangeが実行されるたびに新しいTimerが作成されるのでbackTimerをComponent内のprivate変数としておいた方がいいです。
backTimerの値が都度変わっているためclearTimeoutで削除されるのはその時に作成されたTimerだけとなっていると思います。

class test extends React.Component {

  _backTimer;

  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
  }
  componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }

  _handleAppStateChange = nextAppState => {
    console.log(AppState);

    // _backTimerに値がない場合のみ設定する
    if(!this._backTimer){
      this._backTimer = BackgroundTimer.setTimeout(() => {
        console.log('1分');
      }, 60000);
    }

    if (nextAppState === 'active') {
      // clearTimeoutを実行
　　　 BackgroundTimer.clearTimeout(this._backTimer);
      // _backTimerを初期化
      this._backTimer = 0;
      console.log('Foregound mode');
    }

    if (nextAppState === 'inactive') {
      console.log('Inactive mode');
    }

    if (nextAppState === 'background') {
      console.log('Backgound mode');
    }
  };

Comments

[sunsunny-k]

ご回答くださりありがとうございます。
private _backTimer;
この部分ですが、 Unexpected token となります。

[nekoniki]

失礼しました。
一部Typescriptの記法の箇所があったので修正しました。

[sunsunny-k]

class 外に　let backTimer = 0;
で実現できました。ありがとうございます。