在reactjs函数组件中使用setInterval()时未按预期递增
在React.js函数组件中使用setInterval()时未按预期递增的问题可能是由于闭包引起的。由于函数组件在每次渲染时都会创建一个新的函数作用域，setInterval()中的闭包会捕获到每次渲染时的变量值，导致计时器不按预期递增。
为了解决这个问题，可以使用React的useRef()钩子来保存计时器的引用，确保每次渲染时都使用同一个计时器。具体步骤如下：
- 在函数组件中引入useRef()钩子：import { useRef } from 'react';
- 在组件内部声明一个ref变量来保存计时器的引用：const intervalRef = useRef();
- 在组件的useEffect()钩子中使用setInterval()来创建计时器，并将计时器的引用保存到ref变量中：useEffect(() => { intervalRef.current = setInterval(() => { // 执行递增操作 }, 1000); return () => { clearInterval(intervalRef.current); }; }, []);
- 在递增操作中，可以通过访问intervalRef.current来获取计时器的引用，确保每次递增都是基于同一个计时器。
通过以上步骤，可以确保在React函数组件中使用setInterval()时能够按预期递增。这种方式避免了闭包引起的问题，并且保证了计时器的正确性。
推荐的腾讯云相关产品：腾讯云函数（云原生无服务器计算服务），腾讯云云数据库MySQL版（云数据库服务）。
腾讯云函数产品介绍链接地址：https://cloud.tencent.com/product/scf 腾讯云云数据库MySQL版产品介绍链接地址：https://cloud.tencent.com/product/cdb
相关·内容
我是reactJS的新手。
我正试着在我的网页上附加时间。但是，当我使用setInterval时，时间不工作。只是在页面加载的当前时间停止。
我使用的是React.createClass：
var MainContent = React.createClass({
getInitialState: function(){
return {waktu: new Date().toLocaleTimeString()}
},
componentDidMount: function(){
setInterval(this.tick, 1000)
},
tick:
浏览 0提问于2017-01-29得票数 1
回答已采纳
2回答
我有一个组件，当它可见时，我希望每10秒查询一次API。当组件关闭/不可见时，我希望停止轮询。 我的问题是，即使在组件被隐藏之后，轮询仍在继续。无论我在做什么，我的代码都无法识别新更新的状态变量。 const DisplayState = Object.freeze({
DisplayGroupNamesForSelection: 0,
DisplayLogStream: 1
});
export default function LogStream({ isOpen }) {
const [currentState, setCurrentState] = useS
浏览 7提问于2020-10-28得票数 0
回答已采纳
我对ReactJS并不熟悉，我似乎无法理解为什么以下setState的结果不是我所期望的那样(即每秒钟将值增加1)。
import React from 'react';
import ReactDOM from 'react-dom';
class Layout extends React.Component {
constructor() {
super();
this.state = {
name: "Behnam",
i: 0
}
浏览 4提问于2016-07-27得票数 0
回答已采纳
我使用React渲染我的web应用程序所需的一些组件，我有一个带有播放和停止按钮的计时器。我从get请求中检索所有的时间记录，并且我想在组件每次更改时重新修改它，我如何做到这一点？
除了使用一个简单的setInterval来调用this.forceUpdate()函数之外，一切都可以正常工作，但这给了我一个警告：
警告:forceUpdate(.)：只能更新安装或安装组件。这通常意味着在未挂载的组件上调用forceUpdate()。这是禁止行动。请检查TimerBox组件的代码。
我的组成部分：
var TimerBox = React.createClass({
displa
浏览 3提问于2017-03-09得票数 0
回答已采纳
我有一个span元素。在悬停它的时候，我希望它每隔1秒就会变成hello1 -> hello2 -> hello3，但它不是这样工作的，为什么？
i = 0;
$('div').on('mouseenter', function() {
interval = setInterval(function() {
$('div').html('<span>hello' + i +'</span>');
i++;
}, 1000)
浏览 0提问于2015-08-19得票数 0
我正试着从反应开始。在检查了代码示例之后，我发现了一件非常奇怪的事情。这是链接。这是生命周期部分的代码；
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
因此，在设置时间间隔时，为什么使用箭头函数？我尝试了其他方法(this.tick()本身)，但是它没有像预期的那样工作。
浏览 1提问于2016-12-23得票数 0
回答已采纳
每次刷新页面时，我都会尝试调用函数。我正在做以下工作：
componentDidMount() {
this.props.fetchData(this.state.data);
window.addEventListener('beforeunload', this.handleRefresh);
}
componentWillUnmount() {
window.removeEventListener('beforeunload', this.handleRefresh);
}
我尝试调用的函数如下：
handleRefresh = () =
浏览 0提问于2018-11-01得票数 0
我想在react组件中调用一些函数并在一段时间间隔后更新状态，但它没有像预期的那样工作。这是我的代码。
componentDidUpdate(){
console.log("update")
setInterval(this.tickingTimer(), 2000)
}
tickingTimer(){
this.state.counter = this.state.counter+1
console.log("timer");
}
我也尝试在componentDidMoun
浏览 15提问于2020-05-07得票数 1
回答已采纳
2回答
我正在编写用于练习的Snake游戏应用程序。
我有一个changeDirection函数，它根据箭头单击将适当的方向设置为状态：
changeDirection = event => {
const { direction } = this.state;
const keyPressed = event.keyCode;
if (keyPressed === keyCodes.LEFT_KEY && direction !== "right") {
this.setState({ direction: "left"
浏览 1提问于2019-03-14得票数 0
1回答
我有一个带有useState的简单组件，它在每次单击时增加一个计数器-
function Counter() {
let [counter, setCounter] = useState(0);
const incCounter = () => {
setCounter(counter + 1);
};
return (
<div className="App">
<h1>{counter}</h1>
<button onClick={incCounter}>In
浏览 2提问于2021-01-19得票数 4
回答已采纳
我有两个组件，比如app.js和SetInterval.js。该函数将在调用setinterval.js时调用。现在我想从app.js调用timeinterval函数。我分享了下面的代码供你参考。
//App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import SetInterval from './SetInterval';
export default class App
浏览 1提问于2017-07-15得票数 0
在学习React和ES6的过程中，我参加了正式的教程，并四处游玩，使其与ES6兼容。但是，当涉及到执行Ajax请求时，我会得到以下错误：
CommentBox.js:23未定义的TypeError:无法读取未定义的属性'url‘
下面是我的CommentBox文件/代码：
import React from 'react';
import CommentList from './CommentList.js';
import CommentForm from './CommentForm.js';
export default
浏览 4提问于2016-03-31得票数 1
回答已采纳
刚从探员那开始。我有一个按钮，其:on-click值会导致CPU密集型函数运行；返回需要很长时间。我希望更新按钮本身的文本，以通知用户可能需要等待，因此我定义了一个ratom，它将指定按钮文本，然后在函数运行时使用reset!。
如果我在按钮组件函数之外定义ratom，但是如果我通过let在组件函数中定义ratom，或者如果我在组件函数的顶层定义ratom，则这是有效的。也就是说，如果我取消注释下面的第一行注释，或者取消注释let的两行，按钮文本就无法更改。我做错了什么吗？这是预期的行为吗？适用于这里的ratoms和DOM更新的一般规则是什么？
(def label (reagent.core
浏览 2提问于2016-07-16得票数 0
回答已采纳
我正在尝试实现一个简单的计时器，它在setInterval()中每秒钟设置一次状态，但最初它会递增几秒，但后来它不是在1秒内递增，而是超过了1的递增。 import { useState } from "react";
export default function App() {
var date = new Date();
const [getdate,setDate]=useState("time");
let handle=()=>{
setDate(
date.toTimeString()
)
浏览 15提问于2021-04-01得票数 0
回答已采纳
我在中看到，useEffect(fn, [])中的依赖数组是可选的，而不提供依赖数组应该与提供空数组相同。
但是，如果我的代码与on：相同
useEffect(() => {
console.log("SETTING INTERVAL");
setInterval(() => {
console.log("NOW", Date.now() / 1000);
setDuration(Date.now() - startTime);
}, 1000);
}, []);
有了上面的[]，一切都按
浏览 3提问于2021-02-26得票数 1
回答已采纳
我有一个header.js组件，它存在于next.js/react项目的每个页面上。
在内部，我创建了一个打字机的旋转效果，因此为了启动它，我将代码放在useEffect中如下：
export default function Header () {
useEffect(() => {
let delay = 2200;
let input = document.getElementsByClassName('myButton')[0],
index = 0;
const cycleText = () =>{
浏览 2提问于2021-02-21得票数 2
4回答
我有一个脚本，用来查看有多少条记录是“未读”的。当我使用以下代码时，页面将加载，然后在页面加载时进行编号：
$(document).ready(function(){
$("#notes_number").load("getnumber.php");
});
但我试图让它每5秒更新一次，所以我到处搜索，发现了这个，但它不起作用。我在试着想办法让它运行起来。以下是Javascript代码：
//TRYING TO GET TO UPDATE EVERY 5 SECONDS
window.setInterval(function(){
function(){
浏览 0提问于2013-09-19得票数 0
2回答
正如标题所问的，在ReactJS组件中使用"state“和"this”有什么区别？如果我控制台记录组件的"this"，那么使用"this“声明的状态和属性将出现在对象内的同一”级别“。
"state“似乎是包装组件属性的附加属性吗？如果我想将"state“作为支柱传递给另一个组件，那么传递"this”就足够了吗？
例如：
state = {
isPastDelay: false,
};
componentDidMount () {
this._delayTimer = setTimeout(() => () {
浏览 0提问于2018-07-04得票数 0
回答已采纳
在试用ReactJ时，我面临以下设计问题：
下面是一个简单的html，在这里我试图模拟一个聊天应用程序，我目前正在构建一个在线成员列表，并试图计算出添加新成员到列表中的代码。
下面的React应用程序由DOM层次结构中的以下类组成。
ChatApp > MemberList >成员
在react类ChatApp中，我可以使用setInterval来更新成员集合并为新成员生成新DOM，但是现在我想尝试在ChatApp类之外使用相同的方法。
因此，我添加了一个按钮‘添加成员’，并想要调用一个函数的点击，这将反过来添加一个新的成员到列表。
但是，如何从react应用程序外部获取react
浏览 3提问于2015-07-11得票数 1
回答已采纳
我正在尝试使用setInterval调用reactjs中的函数，如下所示：
import React,{Component} from 'react';
class Timer extends Component {
trigger(){
this.clock = this.setState({clock:Date.now()-this.props.date});
}
setInterval(this.trigger,1000);
constructor(props){
super(props);
this.state = {
clock:0
浏览 0提问于2018-06-17得票数 2
回答已采纳
SetInterval工作正常，但clearInterval不工作
请看我的代码，我有父类Channel和子类Body，当componentDidMount被调用时，在body中，然后我为函数refreshState执行setInterval。在refreshState函数中，我尝试clearInterval，但这不起作用
var Header = require('../../common/header.jsx');
var Sidebar = require('../../common/sidebar.jsx');
var Footer = require(
浏览 0提问于2015-06-24得票数 15
我在应用程序中使用了reactjs。currid_s最初设置为值-1。稍后，在单击按钮后，它被设置为2，但计时器不会在控制台中显示更新后的值。为什么？以下是代码
import React, { useState, useEffect } from "react";
export default function App() {
const [currid_s, setcurrid_s] = React.useState(-1);
const handless = () => {
console.log("yess");
setcu
浏览 17提问于2021-05-23得票数 2
回答已采纳
因此，我对ReactJS中setState的异步本质有一些困惑。根据React文档，您不应该在setState()中使用this.state。但是如果我有一个计数器作为状态，我想在点击时更新它，如下所示：
class App extends React.Component {
state = { counter: 0 }
onClick = () => {
this.setState({counter: this.state.counter + 1})
}
render() {
return (
&l
浏览 5提问于2018-08-13得票数 6
1回答
我正在尝试使用ReactJS和redux构建一个简单的计时器应用程序，并且在Redux中的状态有一个小问题。
这是密码。
import React from "react";
var {connect} = require('react-redux');
var actions = require('actions');
export var TodoBtns = React.createClass({
startTimer: function (todoTimer) {
var {dispatch} = this.p
浏览 3提问于2016-07-23得票数 1
回答已采纳
2回答
在使用的中，我想调用以下函数：
增加组件状态下的属性
将Timeout设置为在一定的时间内再次调用自己
下面是该组件的一个简化示例：
const Counter = () => {
const [count, setCount] = useState(0);
const [counterTimeout, setCounterTimeout] = useState(null);
const updateCount = () => {
setCount(count + 1);
console.log(count);
setCounte
浏览 3提问于2020-04-02得票数 0
回答已采纳
1回答
我有这个自定义钩子来从firebase获取当前用户：
import React, { Component, useEffect, useState } from 'react';
import { auth } from "../firebase/auth-service"
const useFirebaseAuthentication = (firebase) => {
const [authUser, setAuthUser] = useState(null);
try {
auth.onAuthStateChang
浏览 2提问于2021-01-13得票数 0
学习ReactJS，我正在做一个简单的倒计时应用程序。倒计时组件如下所示：
const Countdown = React.createClass({
getInitialState: function() {
return {
remaining: 10,
running: true,
};
},
componentDidMount: function(){
if (this.state.running) {
setInterval(this.tick, 1000);
} else {
console
浏览 5提问于2016-12-12得票数 7
回答已采纳
关于组件生命周期，我有一些奇怪的行为。
在我的应用程序中，我有一个仪表板，里面有几个小部件。每个小部件都是一个反应性组件。
GridWidgets.jsx是管理每一个小工具的父亲。
当我切换到另一个仪表板时，将重新呈现GridWidgets，以便从服务器加载该仪表板的小部件。呈现是正确的，并且呈现了新的小部件。不幸的是，以前的仪表板上的旧组件仍然在运行(制作东西)。
在网上搜索时，我找不到任何具体的“卸载”过程，因为当组件重新呈现自己时，它应该会删除以前的子程序。
关于我的小部件组件，唯一“奇怪”的事情是，在它们的componentWillMount中，我放置了以下代码：
setInterva
浏览 0提问于2018-10-03得票数 1
回答已采纳
我正在我的ReactJS应用程序中创建一个ReactJS，当组件卸载时，我需要清除它。因此，使用以下代码无法实现此目标：
var Timer = React.createClass ({
getInitialState: function () {
return ({
timeLeft: "99:99:99"
})
},
componentDidMount: function () {
var compteur = setInterval( function () {
var heure = new Da
浏览 0提问于2017-02-11得票数 1
回答已采纳
2回答
我试图弄清楚如何做一个实时计数器，它可以增加秒数，而不必刷新页面。下面是我的代码。我对使用ReactJS非常陌生，任何提示/帮助都将受到极大的赞赏。谢谢..
import './Home.css';
import React, { Component } from 'react';
import Moment from 'react-moment';
export default class Home extends Component {
render() {
var date = new Date();
浏览 0提问于2018-04-28得票数 0
回答已采纳
1回答
ReactJS，渲染后重定向
、、、、
在return on render之后，有没有办法或如何重定向？
我想做的是做这样的事：
render() {
return(<div>You have no access</div>)
// then redirect to "/"
我正在考虑创建一个只在3秒后在componentDidMount中重定向的组件，例如，名为<Redirect>的组件，然后像这样使用它：
render() {
return(<Redirect time=3> <div>You have no access</div&g
浏览 1提问于2020-03-19得票数 0
回答已采纳
2回答
我正试图让"asdf“在reactjs中每一秒都被写成控制台。我正在使用setInterval。
这是我的代码：
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script&
浏览 1提问于2019-03-07得票数 0
回答已采纳
我正在尝试创建一个计时器组件，它允许孩子们启动一个计时器，然后为他们提供在1秒间隔内还剩多少时间。
我有以下测试：
/* Test */
jest.useFakeTimers()
it.only('should update the reamining time every second', () => {
const time = 1/12
const wrapper = shallow(<Timer time={time} />)
wrapper.find('.start').simulate('click
浏览 0提问于2017-11-23得票数 3
因此，我进入了非常基本的组件的Reactjs。我从不同的函数中输出相同的状态，但我看到的是不同的值。
import React, { useState, useEffect, useRef } from "react";
const Test = props => {
const [count, setCount] = useState(0);
useEffect(()=>{
setInterval(() => {
console.log("count in interval is:", count);
浏览 3提问于2019-11-01得票数 5
回答已采纳
1回答
功能组件数组未按预期追加属性内容
、、、、
我想向<Feeds/>组件添加一个<TokenFeed/>功能组件数组。问题是，当我这样做时，将一些文本传递给我的<App/>的onClick()事件不能按预期工作。当单击数组版本的<TokenFeed/>时，它将替换我的<input/>文本，而不是附加到文本的末尾。 相反，当我在<Feeds/>的return中添加<TokenFeed/>的副本并单击按钮时，它可以正常工作。 我怎么才能解决这个问题呢？ Demo import React, { useState } from "react";
浏览 45提问于2021-11-17得票数 0
回答已采纳
1回答
在我的坦克游戏中(就像很棒的坦克一样)，我为我的子弹创建了一个计时器，但在运行时，它有一个运行时错误，指出没有定义AItimer。我很困惑，因为我有另一个计时器，在同一个程序中，但没有这个错误。 function aiStartTimer()
{
if(shoot == 0)
{
//creates aitimer variable
AItimer = setInterval("aiFireBullet()",100);
shoot = 1*1;
}
else if(shoot == 1)
浏览 8提问于2021-01-28得票数 0
我希望使用reactjs以每秒钟的间隔将当前的计时值呈现给HTML。我在下面粘贴了代码。我在代码下面运行时出错了。
import react from "react";
**Defined class**
export default class IndependentTimer extends react.Component {
constructor() {
super();
this.state = {
value: ""
};
this.customFun
浏览 1提问于2017-11-06得票数 0
回答已采纳
我想在每秒之后增加状态second = second +1。 const [second,setSecond] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSecond(second+1)
}, 1000);
return () => clearInterval(interval);
}, []); 但似乎发生了一个无限循环，第二个循环只增加了一次，从0增加到1，然后停止运行。 我把我的代码从 setSecond(second+1) 至
浏览 56提问于2020-08-14得票数 2
回答已采纳
2回答
我正在尝试动态更新使用React.js构建的页面中的日期时间值。因此，作为参考，我从以下文章开始：
。
但是日期-时间值没有更新。这是我的代码：
var WelcomeMsg = React.createClass({
render : function()
{
return (
<div>
<h2>Hello , User...</h2>
</div>
)
}
});
var ShowTime = React.createClass({
render : functi
浏览 0提问于2017-09-18得票数 0
回答已采纳
几年前，我听说了一个不错的404页和。
在使用ReactJS时，是打算实现的，但是它的动作缓慢而不稳定，过了一段时间，Chrome给它一个“无响应的脚本”警告，该警告指向第1226行，"var position = index % repeated_tokens.length;"，在连续调用之间有几百毫秒的延迟。脚本不断地超越一个没有响应的页面，让一台计算机屈服。
显然，它们不是相同的实现，尽管ReactJS版本是从"I not not‘re“版本派生出来的。但除此之外，它为什么会陷入困境？我是不是做了一堆很深的闭包？为什么比慢
在这两种情况下，工作都是由次要的算术驱动
浏览 2提问于2015-08-20得票数 0
回答已采纳
上下文:我有一个<Header />组件，它有一个按钮将用户重定向到<SignIn />组件。始终显示<Header />组件，但是当用户登录时，Login按钮消失并被用户名替换。
我将不详细介绍身份验证机制，但让我们简单地说它是基于存储在localStorage中的JWT的。为了读取cookie并确定是否显示登录按钮，我在<Header />中有以下代码：
componentDidMount() {
const token = localStorage.getItem("token");
if (token)
浏览 0提问于2018-08-03得票数 0
回答已采纳
此代码来自react文档：
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => {
setCount(count + 1); // This effect depends on the `count` state
}, 1000);
return () => clearInterval(id);
}, []); // Bug: `count` is not spec
浏览 5提问于2020-11-18得票数 4
回答已采纳
如果我只做changeImage();，它工作得很好，但我不知道如何让setInterval()工作。下面是我的代码：
HTML：
<div id="coin1"></div>
JS：
$(document).ready(function() {
function changeImage() {
if ($("#coin1").css("display") == "none") {
$("#coin1").fadeIn("slow");
}
浏览 0提问于2010-01-16得票数 2
回答已采纳
Reactjs事件/操作按钮没有按预期切换。
我试图添加跟随和取消跟随动作按钮。当我通过axios通过“跟随”按钮发布时，它会将数据发布到服务器后端并返回成功消息。然后，“跟随”按钮切换到“取消跟踪”按钮。
现在我的问题是，当用户试图取消跟踪时，取消按钮不会切换回跟随按钮。
求你了我在这里做错什么了。
这里是json成功消息
[{"status":"success", "follow":"1", "unfollow":"0"}]
这里是我的代码
import React, { Component,
浏览 0提问于2019-01-15得票数 0
回答已采纳
我正在尝试调试我的逻辑 page.waitForFunction 但我登出的任何东西都不会打印出来。如果我尝试使用VScode调试器，它会忽略回调函数中的任何断点。如果我将断点放在 电话，然后试着一步一步来，我就这样结束了 然后卡在一堆节点内部。同样，如果我试图在回调中放置一个断点并跳转到该断点，它不会停止。 我不知道发生了什么。我用错了吗？或者完全误解了它的工作原理？ 这里有一个简单的例子。 const { chromium } = require("playwright");
(async () => {
const browser = await chrom
浏览 98提问于2021-03-02得票数 0
回答已采纳
我试图在React+Redux中运行下面的代码，但是遇到了一个未处理的
异常'NodeInvocationException:不能读取属性'showText‘的空TypeError:不能读取属性'showText’的空‘
import * as React from 'react';
import { NavMenu } from './NavMenu';
import { Component } from 'react';
export interface BlinkState
{
showText:
浏览 0提问于2017-09-07得票数 2
回答已采纳
我遇到了一个奇怪的问题，在setState()钩子函数中改变克隆的顺序会改变预期的行为。
我正在尝试将该值每秒钟增加一秒。然而，这样做会直接导致秒数增加两秒而不是一秒。
这是可行的
const [value, setValue] = useState(new Date());
useEffect(() => {
const interval = setInterval(
() =>
setValue((value) => {
const clonedDate = new Date(value.getTime());
clonedDat
浏览 0提问于2021-07-01得票数 1
我试图建立一个赛马应用程序和新的反应，我正在努力处理一个点击事件，当用户点击‘开始’按钮的骑师比赛。当我删除handleClick函数时(如下面注释所示)，当我重新加载页面时，骑师会自动竞赛(使用react的进度条)。我只想要这个功能时，我点击‘开始’按钮。
App.js
import React, { Component } from 'react';
import Progress from 'react-progressbar';
import logo from '../../images/logo.svg';
import '
浏览 2提问于2018-02-12得票数 1
回答已采纳
我使用ReactJS作为javascript库，并使用axios在componentDidMount()中获取数据。这些接收到的数据必须每60秒再拍一次。什么是最有效和最好的方法来做到这一点？
componentDidMount() {
const newGteeChartSeries = [];
const newGteeChartCategories = [];
const newmultiSelectOption = [];
axios.get(`http://www.xxxxxxx:xxxx/api/groupdata`).then(res => {
t
浏览 2提问于2019-04-04得票数 7
回答已采纳
我试图将一些数据转换成一个间隔状态，我试图创建一个每x秒更新一次的图表。
fuction func() {
console.log('Hello, world!')
}
setInterval(func, 5000)
与其按预期的方式每5秒响应一次，不如每10秒得到两个响应，当我尝试按我实际想要的方式进行状态转换时，这个问题会变得更糟。
下面是来自我的API调用的响应，我所要做的就是将它转换为状态并记录结果。
{
"_id": "60d5e8a81a68bb7b14d9f3b0",
"symbol": "
浏览 5提问于2021-06-25得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
