javascript - 我想在 react 中创建一个倒计时 watch ，用户在其中输入输入，可能在几秒钟内输入，然后它下降到 0

Question

这是我的时钟课。我是全新的 react ，就像我昨天开始的那样，仍然没有完全掌握状态和 Prop 。我认为 componentDidMount() 是一个 react 函数，它一直在执行我在控制台中看到的函数。它现在正在运行，但并不完美。它开始时比它应该减少的更多。谢谢。

 import React, {Component} from 'react';
import './App.css';
import './App';

class Clock extends Component{
constructor(props){
  super(props);
  this.state = {
    seconds: 0,
  }
  console.log('this.props',this.props);
}

//
componentWillMount(){
  this.timer(this.props.time);
}

componentDidMount(){
  setInterval(()=> this.timer(this.props.time),1000);
}


timer(time){
  console.log('time in timer', time)
  let count = 0;
time = time - setInterval(count++);
  this.setState({seconds: time});
}


  render(){

    return (
      <div>
      <div className="Clock-seconds">{this.state.seconds} seconds</div>
      </div>
    )
  }
}

export default Clock;

我在 App.jsx 中的代码如下所示:

import React, {Component} from 'react';
import Clock from './Clock';
import './App.css';
import {Form, FormControl, Button} from 'react-bootstrap';


class App extends Component{
  constructor(props){
    super(props);
    this.state ={
      time: '60',
      newTime: ''
    }
  }

  changeTime(){
    this.setState({time: this.state.newTime});
  }


  render(){
    return (
      <div className="App">
        <div className = "App-title">
          Countdown to {this.state.time}
        </div>

        <Clock
          time={this.state.time}
          />

        <Form inline >
          <FormControl
            className="Deadline-input"
            placeholder='new date'
            onChange={event => this.setState({newTime: event.target.value})}
            />
          <Button onClick={() => this.changeTime()}>
            Submit
          </Button>
        </Form>

      </div>
    )
  }
}

export default App;

Answer 1

我认为您的问题出在这一行:time = time - setInterval(count++);

我不太确定那应该做什么，但这是我的处理方式:

constructor(props){
  super(props);
  this.state = {
    seconds: null, // you'll want to test for null
    timerID: null // this will capture the timer ID so you can clear it. Otherwise every time you navigate away and back to this component, it will create a new timer.
  }
  console.log('this.props',this.props);
}

componentWillMount(){
  //this.timer(this.props.time); // get rid of this altogether, it's not needed and you generally should avoid willMount in favor of didMount
}

componentDidMount(){
  this.setTimer();
  //setInterval(()=> this.timer(this.props.time),1000);
}

componentWillUnmount() {
  clearInterval(this.state.timerID);
}

  setTimer() {
    const {time} = this.props;

    // set state with props if it isn't defined yet
    if (this.state.seconds === null) this.setState({seconds: time});

    // clear existing timer if there is one, to avoid memory leaks
    if (this.state && this.state.timerID) clearInterval(this.state.timerID);

    // define the function that will run each 1 sec
    const tick = () => {
      this.setState({
        seconds: this.state.seconds--
      });
    };

    // set the interval and capture the ID so you can clear it later
    const id = setInterval(tick, 1000);
    this.setState({timerID: id});
  }

请注意，我尚未测试此代码，但希望它能为您指明正确的方向。