setInterval in a React app

javascript reactjs settimeout state

2022-08-30 04:32:59

我对 React 还很陌生，但我一直在慢慢地磨蹭，我遇到了一些我坚持的东西。

我正在尝试在 React 中构建一个“计时器”组件，说实话，我不知道我是否正确地（或有效地）完成了这项工作。在下面的代码中，我将状态设置为返回一个对象，并且一直在玩弄，并且我只能使状态从 10“倒计时”到 9。{ currentCount: 10 }componentDidMountcomponentWillUnmountrender

由两部分组成的问题：我做错了什么？而且，有没有更有效的方法来使用setTimeout（而不是使用&）？componentDidMountcomponentWillUnmount

提前感谢您。

import React from 'react';

var Clock = React.createClass({

  getInitialState: function() {
    return { currentCount: 10 };
  },

  componentDidMount: function() {
    this.countdown = setInterval(this.timer, 1000);
  },

  componentWillUnmount: function() {
    clearInterval(this.countdown);
  },

  timer: function() {
    this.setState({ currentCount: 10 });
  },

  render: function() {
    var displayCount = this.state.currentCount--;
    return (
      <section>
        {displayCount}
      </section>
    );
  }

});

module.exports = Clock;

答案 1

我看到您的代码存在 4 个问题：

在计时器方法中，您始终将当前计数设置为 10
您尝试更新呈现方法中的状态
您不使用方法实际更改状态setState
您没有将 intervalId 存储在状态中

让我们尝试修复此问题：

componentDidMount: function() {
   var intervalId = setInterval(this.timer, 1000);
   // store intervalId in the state so it can be accessed later:
   this.setState({intervalId: intervalId});
},

componentWillUnmount: function() {
   // use intervalId from the state to clear the interval
   clearInterval(this.state.intervalId);
},

timer: function() {
   // setState method is used to update the state
   this.setState({ currentCount: this.state.currentCount -1 });
},

render: function() {
    // You do not need to decrease the value here
    return (
      <section>
       {this.state.currentCount}
      </section>
    );
}

这将导致计时器从 10 减少到 -N。如果您希望计时器减少到 0，则可以使用稍微修改的版本：

timer: function() {
   var newCount = this.state.currentCount - 1;
   if(newCount >= 0) { 
       this.setState({ currentCount: newCount });
   } else {
       clearInterval(this.state.intervalId);
   }
},

答案 2

更新了 10 秒倒计时class Clock extends Component

import React, { Component } from 'react';

class Clock extends Component {
  constructor(props){
    super(props);
    this.state = {currentCount: 10}
  }
  timer() {
    this.setState({
      currentCount: this.state.currentCount - 1
    })
    if(this.state.currentCount < 1) { 
      clearInterval(this.intervalId);
    }
  }
  componentDidMount() {
    this.intervalId = setInterval(this.timer.bind(this), 1000);
  }
  componentWillUnmount(){
    clearInterval(this.intervalId);
  }
  render() {
    return(
      <div>{this.state.currentCount}</div>
    );
  }
}

module.exports = Clock;