Reactjs 如何在react中显示倒计时/倒计时

这是我目前的代码，我正在尝试使用react作为计数器

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
名称：'反应'，
开始计数：1，
完:20,，
};
}
计数器=（）=>{
if（this.state.countstart
{
这个柜台（）
}
, 1000)
}
render（）{
这个柜台（）
返回(

{this.state.countstart}

);
}
}

---

我希望数字在指定的超时毫秒内从1计数到20，这样它从1开始，然后是2，依此类推，如何使用上述代码实现这一点

首先，您需要使用

setInterval

以指定的间隔运行方法，而不是

setTimeout

第二，您需要存储

intervalID

，并确保在

componentWillUnmount

中卸载组件之前停止它

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      countstart : 1 ,
      countend : 20,
    };
    this.counter = this.counter.bind(this);
    this.count = this.count.bind(this);
  }

  componentDidMount() {
    this.count();
  }

  counter = () => {
    if(this.state.countstart < this.state.countend) {
      this.setState({countstart : this.state.countstart + 1})
    }
  }


  count() {
    setInterval(()=>
    {
    this.counter()
    }
     , 1000)
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
          {this.state.countstart}
        </p>
      </div>
    );
  }
}

类应用程序扩展组件{
有效期=0；
componentDidUpdate（）{
this.intervalID=setInterval（（）=>
{
这个柜台（）
}
, 1000)
}
组件将卸载（）{
clearInterval（此为有效期）；
}
//为简洁起见，对代码的其余部分进行了编辑
}

---

这是一个无耻的插件。

您需要使用

setInterval

而不是

setTimeout

。此外，您还可以在

componentDidMount

中启动计数器

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      countstart : 1 ,
      countend : 20,
    };
    this.counter = this.counter.bind(this);
    this.count = this.count.bind(this);
  }

  componentDidMount() {
    this.count();
  }

  counter = () => {
    if(this.state.countstart < this.state.countend) {
      this.setState({countstart : this.state.countstart + 1})
    }
  }


  count() {
    setInterval(()=>
    {
    this.counter()
    }
     , 1000)
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
          {this.state.countstart}
        </p>
      </div>
    );
  }
}

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
名称：'反应'，
开始计数：1，
完:20,，
};
this.counter=this.counter.bind（this）；
this.count=this.count.bind（this）；
}
componentDidMount（）{
这个。count（）；
}
计数器=（）=>{
if（this.state.countstart
{
这个柜台（）
}
, 1000)
}
render（）{
返回(

{this.state.countstart}

);
}
}

上述代码是否存在问题，您可以告诉我们这些问题，以帮助我们指出发生了什么？您可能会发现，通过遵循已发布的文档来了解React会更有用。StackOverflow实际上只能帮助您解决更具体的问题。