React更新setInterval中的属性工作两次
在React中，使用setInterval来执行定时任务时，有时候会遇到setInterval中的属性更新两次的情况。这是因为React的渲染机制会导致组件重新渲染，从而触发setInterval中的属性更新两次。
造成这种情况的原因可能有以下几种：
- 组件重新渲染：当组件的状态或属性发生变化时，React会触发重新渲染。这会导致组件重新挂载，从而触发setInterval中的属性更新两次。
- 闭包问题：当使用setInterval时，闭包的作用域可能会导致属性更新的问题。闭包函数中引用的变量可能会在重新渲染时发生改变，导致setInterval中的属性更新两次。
解决这个问题的方法有以下几种：
- 使用useEffect钩子函数：在函数组件中，可以使用useEffect钩子函数来模拟生命周期方法，并在其中清除定时器。通过使用useEffect的依赖数组，可以控制setInterval只在特定条件下执行，并避免重复触发。
import React, { useEffect } from "react";
const MyComponent = () => {
useEffect(() => {
const timer = setInterval(() => {
// 执行定时任务
}, 1000);
return () => {
clearInterval(timer);
};
}, []); // 依赖数组为空，表示只在组件挂载时执行一次
return (
// 组件的 JSX
);
};
export default MyComponent;- 使用类组件的生命周期方法：在类组件中，可以使用componentDidMount和componentWillUnmount生命周期方法来处理定时任务的启动和清除。
import React, { Component } from "react";
class MyComponent extends Component {
constructor(props) {
super(props);
this.timer = null;
}
componentDidMount() {
this.timer = setInterval(() => {
// 执行定时任务
}, 1000);
}
componentWillUnmount() {
clearInterval(this.timer);
}
render() {
return (
// 组件的 JSX
);
}
}
export default MyComponent;以上是关于React中setInterval属性更新两次的解释和解决方法。对于React开发中的更多问题和需求，腾讯云提供了一系列产品和服务，例如腾讯云服务器、腾讯云函数、腾讯云数据库等，可根据具体场景选择相应的产品进行部署和开发。
更多关于腾讯云产品的介绍和详细信息，可以参考腾讯云官方网站：腾讯云。
相关·内容
我正在练习React钩子来做一个测试计时器，每10秒重置一次。我现在拥有的是每秒钟更新状态，并相应地呈现p标记。但是，当我console.log(秒)时，它每次显示10次，因此条件(秒=== 0)永远不会满足。在Chrome的React中，状态也在相应地更新。我在这里做错什么了？
import React, {useState } from 'react';
function App() {
const [seconds, setSeconds] = useState(10);
const startTimer = () => {
const int
浏览 3提问于2020-08-26得票数 4
回答已采纳
我的目标是设置一个游戏循环，但是一个简单的测试并不像预期的那样有效。在下面的组件中，我尝试使用useEffect挂钩来增加food。我希望看到“食物: 1”。相反，我看到了“食物: 0”。当我使用dev工具检查组件时，我可以看到食物是2，我发现这个组件安装、增加、卸载、重新安装和再次增加食物。
我有两个问题：
我能为这双坐骑做点什么吗？(比如阻止它，还是等到最终挂载时再使用嵌套组件？)
为什么显示的食物数仍然等于零？是因为game在<span>Food: {game.food}</span>中仍然引用初始实例吗？如果是这样，我如何获得最新的实例？
构成部
浏览 13提问于2022-08-08得票数 1
回答已采纳
import React from 'react';
import {Plugins} from '@capacitor/core';
import {useState, useEffect} from 'react';
import {db} from './Firebase';
const Maps = () => {
const [lat, setLat] = useState(0);
const [long, setLong] = useState(0);
const [count, setCount] =
浏览 9提问于2019-12-25得票数 0
这是的后续问题.
简单地说，我用两种不同的方式获取相同的日期。一个接一个，一起更新。我有一个带有上下文和useReducer的简单商店。
我目前的代码如下：
import React, { useEffect } from "react";
import axios from "axios";
import { useGlobalState } from "./state";
const arr = Array.from(Array(100), (x, i) => i + 1);
function App() {
const [{
浏览 0提问于2019-06-03得票数 0
回答已采纳
未在控制台中更新但在视图中更新的状态值。
这是我的全部代码
import React, { useEffect, useState } from 'react';
const Add = (props) => {
console.log("a = ", props.a)
console.log("b = ", props.b)
const c = props.a+props.b;
return (
<div>
<p><b>{prop
浏览 6提问于2020-08-24得票数 0
回答已采纳
4回答
我创建了一个简单的组件，状态更新有问题。我知道正确的解决方案，但我的问题是:为什么这段代码不能工作？
import * as React from "react";
import {useEffect, useState} from "react";
type CountdownProps = {
start: number;
}
export const Countdown: React.FunctionComponent<CountdownProps> = ({start}: CountdownProps) => {
浏览 4提问于2020-01-06得票数 0
回答已采纳
我正在研究响应波多罗时钟，我被困在了使用setTimeout()加入if/else的过程中。这是我的代码：
React.useEffect(() => {
if(props.isOn === true) {
if(props.timeLeft <= 0) {
setTimeout(function() {
if(props.activeClockType === 'Session') {
props.handleClockType('Break');
浏览 0提问于2019-03-07得票数 1
回答已采纳
我使用React渲染我的web应用程序所需的一些组件，我有一个带有播放和停止按钮的计时器。我从get请求中检索所有的时间记录，并且我想在组件每次更改时重新修改它，我如何做到这一点？
除了使用一个简单的setInterval来调用this.forceUpdate()函数之外，一切都可以正常工作，但这给了我一个警告：
警告:forceUpdate(.)：只能更新安装或安装组件。这通常意味着在未挂载的组件上调用forceUpdate()。这是禁止行动。请检查TimerBox组件的代码。
我的组成部分：
var TimerBox = React.createClass({
displa
浏览 3提问于2017-03-09得票数 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
回答已采纳
我试着使用新的反应钩功能，但有点绊倒了。
我有一个useEffect，它调用setInterval，它更新本地状态。如下所示：
const [counter, setCounter] = React.useState(0);
React.useEffect(() => {
const k = setInterval(() => {
setCounter(counter + 1);
}, 1000);
return () => clearInterval(k);
}, []);
return (
<di
浏览 1提问于2019-01-28得票数 1
回答已采纳
在我的React应用程序中，我遇到了一些奇怪的行为，其中setEffect的状态(比如state1)作为第二个参数，在没有调用setState1的情况下改变了另一个变量(而不是状态)。因此，我编写了以下代码，以查看是否会发生相同的情况，并做到了：
import React, { useState, useEffect } from 'react';
function App() {
let [state1, setState1] = useState('');
let count = 0;
useEffect(() => {
co
浏览 1提问于2020-09-25得票数 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
回答已采纳
我有一个简单的组件，它有两个道具: title和percent。我希望动态显示从0到传递给组件的任何数字之间的百分比。它在我身上的作用是从0增加到1，就是这样，然后停在那里。看起来它呈现组件，进入componentDidMount，增加到1，然后即使setState被触发也不会重新呈现组件。什么可能是一个问题？
import React from "react";
import PropTypes from "prop-types";
class ItemList extends React.Component {
constructor(props)
浏览 7提问于2021-06-12得票数 1
我对从react.js文档中获取的代码片段感到有点困惑：
但我把它转化为一般的js案件：
var SomeFunc = function(){
this.intervals = [];
this.setInterval = function(){
this.intervals.push(setInterval.apply(null, arguments));
};
var self = this;
this.cleanup = setTimeout(function(){
self.intervals.map(cl
浏览 4提问于2015-08-22得票数 2
回答已采纳
3回答
我是新的反应，我试着遵循这个时钟滴答的例子，但做了一些不同的事情。我希望ReactDOM在index.js中呈现。这是我的代码：
Timer.js:
import React from 'react';
const Timer = () => {
const tick = () => {
return new Date().toLocaleTimeString().toString();
};
const element = (
<div>
<h1>Hel
浏览 3提问于2020-02-19得票数 1
回答已采纳
我目前正在将我的ReactJS代码移动到React Native，我想知道我是否需要以任何方式更新它。它正在工作，但我认为可能是某个地方的内存泄漏(我在运行应用程序时收到警告)。 我所指的部分是： class Stopwatch extends Component {
constructor() {
super();
this.state = {
timerOn: false,
timerStart: 0,
timerTime: 0
};
}
startTimer = () => {
thi
浏览 22提问于2020-06-12得票数 0
回答已采纳
2回答
我有一个功能组件，它应该是一个运行的时钟： import React,{useState,useEffect} from 'react';
import 'materialize-css/dist/css/materialize.min.css';
import { parseTime } from '../../Utils/utils'
const MainClock = (props) => {
const [timeString, setTimeString] = useState(parseTime(new Date()
浏览 92提问于2020-11-03得票数 4
回答已采纳
目前，我正在尝试遵循官方的reactjs文档，并运行一些示例。最近我尝试了这个例子：
但当我把这段代码：
import React from 'react';
import ReactDOM from 'react-dom';
class Clock extends React.Component {
state = {
date: new Date()
};
constructor(props:any) {
super(props);
this.timerID = 0;
}
浏览 0提问于2019-08-29得票数 2
回答已采纳
1回答
我是初学者。我有一个问题，我在React中做了一个计数器，但不幸的是，它不能正常工作。我找不到错误，有人能帮我吗？
import React, { useState, useEffect } from "react";
export default function CountDown() {
let [seconds, setSeconds] = useState(3);
let [minutes, setMinutes] = useState(59);
let [hours, setHours] = useState(3);
useEffect(() =>
浏览 0提问于2020-12-07得票数 0
2回答
我在尝试使用setInterval更改react中的状态时遇到问题。为什么函数"alert“总是显示"null”消息？
import React, { useEffect, useState } from 'react';
const Playlist = (props) => {
const [test, setTest] = useState("");
useEffect(() => {
setInterval(load, 3000)
}, []);
const load = async () =&
浏览 1提问于2020-06-07得票数 0
我有一个可以自我更新的对象。假设它每一秒都会改变它的状态。 export class Obj {
val = 0;
start = () => {
setInterval(() => {
this.update();
}, 1000);
}
update = () => {
this.val++;
}
} 我认为(如果我错了，请纠正我)，类似的替代方案是连接到数据流的对象，每隔几毫秒将其状态更改为最后接收的值。 我现在需要一个react组件(使用钩子)来显示以下内容： function C(obj) {
r
浏览 42提问于2020-07-17得票数 0
我需要使用react本机实现PIP模式，但是当用户进入PIP模式时，它应该每秒钟更新一次。
我试过使用以下软件包，但没有工作：
浏览 19提问于2022-12-04得票数 1
1回答
我很难理解setInterval是如何工作的。我的主要问题是间隔被重新初始化得太频繁了。基本上，我想要一个上下文敏感的侧边栏被MainElement修改，并且我希望这个侧边栏在一个常规的基础上做一些事情。在实际场景中，当卸载ofc时，计时器会被取消。
import { useEffect, useState } from 'react';
// This is the component called from outside
export const MainLayout = () => {
const [element2Content, setElement2C
浏览 6提问于2022-07-20得票数 0
回答已采纳
我开始学习React，我想知道为什么我的计数器不能工作:(我的目标是:当您按下按钮时，计数器函数在td中开始“计数”并呈现“计数”状态。我不知道我做错了什么。
import React, { useState } from "react";
function Clock() {
const customStyle = {
fontSize: "100px"
};
const tdStyle = "px-3 border border-dark border-3 rounded bg-secondary";
//----
浏览 4提问于2022-05-17得票数 1
回答已采纳
请你向我解释一下我的计时器部件出了什么问题，以及如何修复它。
停止和重置按钮不像我计划的那样工作。
停止按钮必须停止计时器(它的意思是status=false)，但保存最后的runningTime值。
重置按钮必须清除两个值(status=false, runningTime=0)，但它只清除时间戳的列表，而status和runningTime保持不变。
我想我使用setInterval函数的方式有问题，但我不知道到底是什么。
import React, { useEffect, useState, useRef } from "react";
const initialSt
浏览 1提问于2021-08-31得票数 1
回答已采纳
2回答
我正在尝试在我的react js项目中实现一个进度条，但是它不能正常工作。我已经实现了进度条的子组件的代码-
export const Child = (props: ChildProps): React.ReactElement => {
const { text, showProgress, typeId } = props;
const [progress, setProgress] = React.useState<number>(0);
React.useEffect(() => {
const timer =
浏览 3提问于2021-05-19得票数 0
8回答
我一直在玩React，并有以下仅将Date.now()呈现到屏幕上的time组件：
import React, { Component } from 'react';
class TimeComponent extends Component {
constructor(props){
super(props);
this.state = { time: Date.now() };
}
render(){
return(
<div> { this.state.time } </div>
);
浏览 12提问于2016-09-10得票数 185
回答已采纳
我知道这段代码可以工作，count值每隔2秒就会更新一次：
import React from 'react';
function App() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
setInterval(() => {
setCount(prev => prev + 1);
}, 2000);
}, []);
return <h1>{count}</h1>;
}
我试图理解
浏览 12提问于2021-12-09得票数 1
回答已采纳
我刚开始做出反应，今天我遇到了一个非常奇怪的情况，我想要做的是每5秒从服务器端获取数据，但是它不像预期的那样工作，问题可以简化为：
npx create-react-app my-app
cd my-app
编辑App.js
import { useState } from "react";
function App() {
const [count, setCount] = useState(0)
const increment = () => {
// simulate the querying, for example, checking th
浏览 4提问于2022-08-30得票数 0
2回答
如何运行一系列倒计时时钟
、、、、
我试图从一个数组中运行多个计数，例如，11、12、13、14、15、16。我想要实现的是，第一次将计数时间设置为11，当它达到0时，定时器被设置为12，然后计数到0。在此之后，重置到13，然后倒计时，然后重置到14，然后倒计时等等。
但是，我的代码只能从11下降到0，然后停止。因为循环似乎不工作，永远不要把第二项12进入计时器。我后来发现这是因为retun在for循环中破坏了它在循环之外的位置。我想知道是否有一些聪明的方法来避免返回在一个For-循环？或者，如何在不中断循环的情况下在For-循环中使用返回？
(我在那里有另一个名为TotalTime的柜台，我打算计算所有的时间，即11+12+1
浏览 4提问于2022-01-01得票数 0
回答已采纳
我们遇到了一个奇怪的问题。我是一个reactJs的新手，在一个简单的计时器项目上工作。我的代码如下：
import React, { useEffect, useState } from "react";
const TestTimer = () => {
const [seconds, setSeconds] = useState(10);
useEffect(() => {
let timer = setInterval(() => {
console.log(seconds);
浏览 5提问于2022-05-25得票数 0
回答已采纳
1回答
我的应用程序中有些部分必须同步工作。我用的是作架。问题是祖站的setState函数是异步工作的。请告诉我是否还有其他库支持同步状态更改或任何技巧。
App.js (react示例)
// in real
import create from 'zustand'
import logo from './logo.svg';
import React, { useEffect } from 'react';
const useStore = create(() => ({
counter: 0
}))
function App() {
浏览 5提问于2022-05-18得票数 0
我正试着建立一个有反应的计时器
由于某种原因，它没有正确地递增--使用效果钩子被触发了太多次，我知道为什么会发生这种情况。
它不是以1秒间隔递增，而是以3或更多秒间隔递增。
也许你解释了为什么钩子被触发了那么多次，以及我能做些什么来解决这个问题。
const Timer = () => {
const [timeDisplayed, setTimeDisplayed] = useState(0);
const [startTime, setStartTime] = useState(0)
const [timerOn, setTimerOn] = useState(false
浏览 2提问于2022-03-08得票数 1
回答已采纳
3回答
我有3个组件依赖于它的父值和onChange发送值。
但
它总是0,1,0,1
预期行为应为0,1,2,3,4,5
我应该只使用props.value还是在每个组件中添加一个新的状态(如setValue )
import React, { useState, useEffect} from 'react'
const Grand=(props)=>{
const {onChange,value} = props
useEffect(()=>{
setInterval(()=>{
console.
浏览 5提问于2021-08-25得票数 1
回答已采纳
我有以下反应成分：
App.tsx:
function App() {
const [countdownTimers, setCountdownTimers] = React.useState<
Map<number, number>
>(new Map([[1, 60]]));
useEffect(() => {
const timeoutId = setInterval(() => {
setCountdownTimers((prevState) => {
浏览 20提问于2022-11-26得票数 1
回答已采纳
1回答
我有一个非常基本的React组件，它显示一系列的点，以便在加载的时候，默认情况下，它最多显示3个点，并且在componentDidMount函数中设置的区间上的点增量，重置为点的数量。点数和间隔都可以通过道具覆盖。这个组件在下面。
import * as React from 'react';
export interface Props {
interval?: number;
dots?: number;
}
class LoadingDots extends React.Component<Props, object> {
publ
浏览 0提问于2018-09-19得票数 1
回答已采纳
我正在尝试创建一个时钟，用户可以在其中选择一个位置，并在屏幕上呈现当前时间。对于第一次单击用户按钮，代码工作得很好。但是，如果他们随后选择了不同的位置，则小时状态值应更新为新值。它做到了这一点，但react也将旧值渲染到屏幕上。因此，时钟上的小时在两个不同的值之间闪烁。谁能解释为什么会发生这种情况，以及为什么我只能在用户再次单击后才能显示新的小时值？
import React from 'react';
import ReactDOM from 'react-dom';
import ButtonClick from './Components/User
浏览 17提问于2019-07-16得票数 1
回答已采纳
state属性count并没有像预期的那样每秒增加10个。它有时会以其他数量增加，很快就会变得相当大。 我试过了： this.setState((state,props)=>
{count: state.count + 10}) class Application extends React.Component {
constructor(props){
super(props)
this.state = {
count: 0
}
this.d
浏览 10提问于2020-07-05得票数 0
我想要在按钮被按下时每秒更改状态时间的值。我有下面的代码，但不幸的是代码不能工作。你对如何处理这个问题有什么建议吗？ 非常感谢！ import React,{useState} from 'react';
import {View,Text,StyleSheet,TouchableOpacity} from 'react-native';
import { AntDesign } from '@expo/vector-icons';
const TimeButton = () =>{
const [time,setTime] =
浏览 37提问于2020-08-26得票数 0
回答已采纳
如果用户试图在myState为true时将活动页面(window/tab/etc)从我们的页面更改为另一个页面，那么我们希望使用react-router通知/警告在响应JS时的用户。
我尝试用help 实现它，并在React路由器的文章中实现它。尽管这些只是指出/工作时，用户想要关闭页面或重新加载它。然而，我需要知道什么时候用户只是暂时离开页面，而不一定要关闭它。
我怎样才能做到这一点？
浏览 4提问于2016-09-01得票数 0
2回答
我试图在React.js中实现计数器，它在单击时不断地增加值，但是我没有得到适当的结果，代码在普通html/js中工作得很好。
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [value, setValue] = useState(0);
const continuosIncerment = () => {
console.log(`Setting ${value}`);
浏览 5提问于2020-05-30得票数 1
回答已采纳
2回答
使用组件的方法：
import React from "react";
import MyAvatars from "../../components/MyAvatar/MyAvatars";
const About = () => {
return (
<MyAvatars
topType={[true, 1000]}
accessoriesType={[true, 1200]}
facialHairType={["blank"]}
/>
浏览 4提问于2022-02-23得票数 2
回答已采纳
2回答
我在这里创建了一个堆栈结构。如您所见，我在Home.js中使用设置间隔函数制作了一个计时器。Setinterval函数在Home.js中工作，但当我转到Details页面时，它继续工作。当我切换到详细信息页面时，我如何使它停止呢？
Router.js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/st
浏览 1提问于2021-01-17得票数 1
回答已采纳
React没有解决方案来支持cron作业。您能分享一下您在React中安排事件的解决方案/替代方案吗？
一种解决方案可能是找出现在和计划时间之间的时间差，并为该差找到setTimeout。
还有其他想法吗？
谢谢!
浏览 0提问于2017-12-09得票数 3
2回答
我正在尽力在React中每隔2秒添加一个字母来表示状态。由于某种原因，我得到了整个单词("Welcome")，而不是一次一个字母。下面是我的代码： import React from "react";
class ShowState extends React.Component {
constructor() {
super();
this.state = {
word: ""
};
}
handleButton = (
浏览 25提问于2020-09-13得票数 0
回答已采纳
我正在努力学习反应，我正在努力创造一个工作时钟
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends React.Component {
render() {
function tick() {
return new Date().toLocaleTimeString();
}
return <h1>{tick()}</h1>;
浏览 3提问于2022-01-09得票数 0
为什么这不能作为一个正常的一秒计数器工作？
function UseEffectBugCounter() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
const intervalId = setInterval(() => {
setCount(count + 1);
console.log(count);
}, 1000);
return () => clearInterval(intervalId);
}, []
浏览 44提问于2019-11-13得票数 1
2回答
我尝试用setInterval方法多次使用ref，但只有一个在工作
我已经创建了一个ref作为一个数组，然后我尝试通过使用索引键将函数插入到数组中，但是这只适用于第一个插入，我不知道我做错了什么
以下是我所取得的成就
import React, { useState, useEffect, useRef, createRef } from "react";
import ReactDOM from "react-dom";
function Counter() {
const [countSec, setCountSec] = useState(0);
浏览 4提问于2019-10-15得票数 2
回答已采纳
在学习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
回答已采纳
我有一个包含3个元素的数组。我想循环它，这样3秒后，数组的下一个元素将被呈现，而如果最后一个元素被呈现，那么它应该再次重新启动。就像在3秒后，我想显示下一个元素而不是前一个元素，就像循环遍历数组一样，但每次只显示一个元素。我已经尝试了下面的代码。
import React, { useEffect, useState } from 'react';
import './text.css';
const Text = () => {
var work = ["fighting", "learning", "
浏览 7提问于2020-06-24得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
