Очистить интервал установлен на состояние - PullRequest
Новая
       11

Очистить интервал установлен на состояние

0 голосов
/ 13 декабря 2018

Я устанавливаю интервал на componentDidMount() и сохраняю его в своем состоянии приложения.

Таймер запускается правильно, но я не могу очистить его, когда захочу.Это начальное состояние: 

this.initialState = {
            score: 0,
            finished: false,
            currentQuestion: 0,
            questions: [],
            minutes: 1,
            seconds: 15,
            timer: 0
};

Действие выглядит следующим образом.Он получает таймер (интервал) в качестве параметра: 

export function updateTimer(timer) {
    return {
        type: UPDATETIMER,
        payload: {
            timer
        }
    }
}

У меня есть эта функция создателя действий на моем reducers.js: 

function timer(state = 0, action = {}) {
    switch(action.type) {
        case RESTART:
            return 0;
        case UPDATETIMER:
            if(action.payload.timer !== undefined){
                return action.payload.timer;
            }else {
                clearInterval(state);
                return 0;
            }           
        default:
            return state;
    }
}

В App.js я использую его следующим образом: 

<Navbar 
            onUpdateTimer= {
              (timer) => {
                this.props.dispatch(updateTimer(timer))
              }
            }
/>

Что я пытаюсь сделать, так это то, что если у вызова есть аргумент, он устанавливает интервал, а если нет, очищает его.

Компонент, который вызывает действие, является следующим: 

import React from 'react';

export default class CountDown extends React.Component {
  constructor(props) {
    super(props);
    this.startTimer = this.startTimer.bind(this);
    this.countDown = this.countDown.bind(this);
  }

  startTimer() {
    this.props.onUpdateTimer(setInterval(this.countDown, 1000));
  }

  countDown() {
    let minutes = this.props.minutes;
    let seconds = this.props.seconds - 1;
    if (seconds === 0) { 
      if(minutes !== 0){
        minutes -=1;
        seconds = 59;
      }else {
        this.props.timeUp()
        setTimeout(function(){
          alert("SE HA ACABADO EL TIEMPO");
        },0);
      }
    }
    this.props.onUpdateTime(minutes, seconds);
  }

  render() {
      return (
        <div id="clockdiv">
          <span className="minutes">{this.props.minutes} : </span>
          <span className="seconds">{this.props.seconds}</span>
        </div>
      );
  }

  componentDidMount(){
    this.startTimer();
  }
}

Правильно ли я использую clearInterval(state) в функции создателя действия?

...