Question

我试图让我的计时器应用程序在我按下重置按钮时重置为const initState中的初始值，但是它只是停止了计时器，而没有重置这些值。我在Reset initial state in React + ES6上尝试了多种不同的解决方案，但是得到了相同的结果：重置按钮只是停止计时器，而没有实际重置值。到目前为止，这是我的代码：

import React, { Component } from 'react';
import moment from 'moment';
import './App.scss';
import TimerHeader from './TimerHeader';
import TimerSettings from './TimerSettings';
import TimerDisplay from './TimerDisplay';
import TimerControls from './TimerControls';
import TimerFooter from './TimerFooter';

//set initial state w/default durations, clock set to 'SESSION', and not running

const initState = {
  currentTime: moment.duration(25, 'minutes'),
  sessionTime: moment.duration(25, 'minutes'),
  breakTime: moment.duration(5, 'minutes'),
  label: 'SESSION',
  running: false,
  timer: null 
}

class App extends Component {
  constructor(props) {
    super(props)

    this.state = initState;

    this.changeSessionTime = this.changeSessionTime.bind(this);
    this.changeBreakTime = this.changeBreakTime.bind(this);
    this.switchLabel = this.switchLabel.bind(this);
    this.switchTimer = this.switchTimer.bind(this);
    this.startTimer = this.startTimer.bind(this);
    this.stopTimer = this.stopTimer.bind(this);
    this.resetTimer = this.resetTimer.bind(this);
    this.countdown = this.countdown.bind(this);
    this.playAudio = this.playAudio.bind(this);
  }

  //new function to set currentTime to either sessionTime or breakTime based on label?

  //change the session and/or break times that are displayed
  changeSessionTime(newSessionTime) {
    this.setState({
      currentTime: !this.state.running && this.state.label === 'SESSION' ? newSessionTime.clone() : this.state.currentTime,
      sessionTime: newSessionTime
    })

  }

  changeBreakTime(newBreakTime) {
    this.setState({
      currentTime: !this.state.running && this.state.label === 'BREAK' ? newBreakTime.clone() : this.state.currentTime,
      breakTime: newBreakTime
    })
  }

  //change the clock setting when an active timer hits 0
  switchLabel() {
    this.setState({
      label: this.state.label === 'SESSION' ? '\xa0' + 'BREAK' : 'SESSION'
    })
  }

  //change the timer from session to break when an active timer hits 0
  switchTimer() {
    this.setState({
      currentTime: this.state.label === 'SESSION' ? this.state.sessionTime.clone() : this.state.breakTime.clone()
    })
  }


  //start the timer when start button is clicked
  startTimer() {
    if (this.state.running) {
      return
    } else {
      this.setState({
        running: true,
        timer: setInterval(this.countdown, 1000)
      })
    }
  }

  //stop the timer when stop (i.e., pause) button is clicked
  stopTimer() {
    if (!this.state.running) {
      return
    } else {
      this.setState({
        running: false,
        timer: clearInterval(this.state.timer)
      })
    }
  }

  //reset the timer when reset button is clicked
  resetTimer() {
    clearInterval(this.state.timer)
    this.setState(initState)
  }

  //reduce timer by the second when running === true
  countdown() {
    if (this.state.running) {
      this.setState({
        currentTime: this.state.currentTime.subtract(1, 'seconds')
      })
    }

    if (this.state.running && this.state.currentTime.get('minutes') <= 0 && this.state.currentTime.get('seconds') <= 0) {
      this.playAudio();
      this.switchLabel();
      this.switchTimer();
    }

  }

  playAudio() {
    const beep = document.getElementById("beep");
    beep.play();
  }


  render() {
    return (
      <div className="container-fluid container-clock">
        <TimerHeader />
        <TimerSettings currentTime={this.state.currentTime} sessionTime={this.state.sessionTime} breakTime={this.state.breakTime} label={this.state.label} running={this.props.running} changeSessionTime={this.changeSessionTime} changeBreakTime={this.changeBreakTime} />
        <TimerDisplay currentTime={this.state.currentTime} />
        <TimerControls startTimer={this.startTimer} stopTimer={this.stopTimer} resetTimer={this.resetTimer} />
        <TimerFooter />
      </div>
    );
  }
}


export default App;

为什么不resetTimer()清除现有间隔，然后将初始值放到在开始的'const initState'中定义的所有值？任何见解都会有所帮助。谢谢！

Answer 1

问题在于，您实际上是在引用同一对象，然后修改状态，而不是这样做：

Glide.with(context.getApplicationContext())
                .load(GetImageUrl())
                .asBitmap()
                .listener(new RequestListener<String, Bitmap>() {
                    @Override
                    public boolean onException(Exception e, String model, Target<Bitmap> target, boolean isFirstResource) {
                        return false;
                    }

                    @Override
                    public boolean onResourceReady(Bitmap resource, String model, Target<Bitmap> target, boolean isFromMemoryCache, boolean isFirstResource) {

                        return false;
                    }
                })
                .diskCacheStrategy(DiskCacheStrategy.RESULT)
                .thumbnail(0.5f)
                .into(image);

您需要执行以下操作：

this.state = initState;

这将解决您的问题。

Answer 2

const initState = {
  number: 0,
  timer: null 
}

class App extends React.Component {
   constructor() {
     	super();
      this.state = initState;
      this.start = this.start.bind(this);
      this.stop = this.stop.bind(this);
   }
   start() {
     const { timer } = this.state;
     if (timer) return null;
     this.setState({
       timer: setInterval(() => {
         this.setState({
            number: this.state.number + 1,
         });
       }, 200),
     });
   }
   stop() {
   	const { timer } = this.state;
   	clearInterval(timer);
    this.setState(initState);
   }
   render() {
   		const { number } = this.state;
      return(
        <div>
          <div>{number}</div>
          <button onClick={this.start}>Start</button>
          <button onClick={this.stop}>Stop</button>
        </div>
      );
   }
}

这应该可行，您可以在此处查看示例：https://jsfiddle.net/iamgutz/t72zv9y8/18/

将React计时器重置为初始常量值

2 个答案: