React应用程序中的setInterval

作者: star*위위
发布时间: 2024-06-06 03:31:03 (3天前)
转自：

4 条回复

0#
回复此人
你咖喱人biss嗷 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我看到你的代码有4个问题： </p> <UL> <LI> 在您的计时器方法中，您始终将当前计数设置为10 </LI> <LI> 您尝试在render方法中更新状态 </LI> <LI> 你不用 <code> setState </code> 实际改变状态的方法 </LI> <LI> 您没有将intervalId存储在状态中 </LI> </UL> <P> 我们试着解决这个问题： </p> <pre> <code> 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> ); } </code> </pre> <P> 这将导致计时器从10减少到-N。如果您希望计时器减少到0，您可以使用稍微修改的版本： </p> <pre> <code> timer: function() { var newCount = this.state.currentCount - 1; if(newCount >= 0) { this.setState({ currentCount: newCount }); } else { clearInterval(this.state.intervalId); } }, </code> </pre> </DIV>

编辑
1#
回复此人
时间 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用更新的10秒倒计时 <code> class Clock extends Component </code> </p> <pre> <code> 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; </code> </pre> </DIV>

编辑
2#
回复此人
猫南北 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用更新的10秒倒计时的<strong> 钩 </强> （一个新的功能提议，允许您使用状态和其他React功能而无需编写类。它们目前在React v16.7.0-alpha中）。 </p> <pre class="lang-js prettyprint-override"> <code> import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; const Clock = () => { const [currentCount, setCount] = useState(10); const timer = () => setCount(currentCount - 1); useEffect( () => { if (currentCount <= 0) { return; } const id = setInterval(timer, 1000); return () => clearInterval(id); }, [currentCount] ); return <div>{currentCount}</div>; }; const App = () => <Clock />; ReactDOM.render(<App />, document.getElementById('root')); </code> </pre> </DIV>

编辑

登录后才能参与评论