javascript - 卡在一个 React 倒计时应用程序上，想知道如何正确使用 setInterval

Question

我只是想知道为什么 setInterval 函数没有减少时间...... setInterval 不是应该一次又一次地运行一个函数吗？ 我希望如果我输入 100 并按提交，它会减少 1 1。

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

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

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

    timer(time){
        console.log('new time',time )
        this.setState({seconds:time-1});
      }

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

这是 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

每次你在计时器函数中设置状态时，你都会将其基于 this.props.time，它不会改变，状态才是真正发生变化的。因此，您需要根据先前的状态设置状态。另外，为什么在构造函数中将秒状态设置为 60？您不想将其设置为 this.props.time 吗？

我相信这就是您想要实现的目标:

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

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

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

  timer(){
    console.log('new time', this.state.seconds )
    this.setState(prevState => ({
      seconds: prevState.seconds - 1
    }));
  }

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

编辑:根据您的编辑，这是我的新解决方案，它只有应用程序组件而没有时钟组件，因为您似乎试图使用两个不同的组件执行相同的操作:

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      seconds: null
    }
  }
  componentDidMount() {
    setInterval(this.timer.bind(this), 1000);
  }
  timer() {
    if (this.state.seconds) {
      this.setState(prevState => ({
        seconds: prevState.seconds - 1
      }));
    }
  }
  handleClick(event) {
    event.preventDefault();
    this.setState({seconds: this.textInput.value});
  }
  renderClock() {
    if (this.state.seconds > 0) {
      return (<div className = 'App-title'>{this.state.seconds} Seconds</div>);
    } else if (this.state.seconds === 0) {
      return (<div className = 'App-title'>Done!</div>);
    }
  }
  render() {
    return (
      <div className="App">
        {this.renderClock()}
        <form>
          <input
            className='Deadline-input'
            placeholder='new date'
            ref={input => this.textInput = input}
            type='text'>
          </input>
          <button onClick={event => this.handleClick(event)}>Submit</button>
        </form>
      </div>
    );
  }
}

这是使用普通表单，您可以将其更改为使用 Bootstrap 表单。我不确定这是否会弄乱任何事情，但是当我测试它时，这对我有用。