Question

我正在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)吗？

清除间隔设置为开启状态

0 个答案: