React应用程序中的setInterval(setInterval in a React app)

React应用程序中的setInterval(setInterval in a React app)

我在React方面还是比较新的，但我一直在慢慢磨练，而且遇到了一些困难。

我试图在React中构建一个“计时器”组件，老实说，我不知道我是否正确地（或有效地）这样做。 在我下面的代码中，我将状态设置为返回一个对象{ currentCount: 10 }并且一直在使用componentDidMount ， componentWillUnmount和render并且我只能将状态从10倒数到9。

两部分问题：我错了什么？ 而且，是否有更有效的方法来使用setTimeout（而不是使用componentDidMount ＆ componentWillUnmount ）？

先谢谢你。

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;

I'm still fairly new at React, but I've been grinding along slowly and I've encountered something I'm stuck on.

I am trying to build a "timer" component in React, and to be honest I don't know if I'm doing this right (or efficiently). In my code below, I set the state to return an object { currentCount: 10 } and have been toying with componentDidMount, componentWillUnmount, and render and I can only get the state to "count down" from 10 to 9.

Two-part question: What am I getting wrong? And, is there a more efficient way of going about using setTimeout (rather than using componentDidMount & componentWillUnmount)?

Thank you in advance.

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;

最满意答案

我看到你的代码有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); } },

I see 4 issues with your code:

In your timer method you are always setting your current count to 10 You try to update the state in render method You do not use setState method to actually change the state You are not storing your intervalId in the state

Let's try to fix that:

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> ); }

This would result in a timer that decreases from 10 to -N. If you want timer that decreases to 0, you can use slightly modified version:

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