REACT中setInterval设置useState显示错误问题

神医张郎中

已于 2022-08-13 15:11:05 修改

阅读量752

点赞数 2

文章标签： react.js javascript 前端

于 2022-08-12 22:07:17 首次发布

本文链接：https://blog.csdn.net/qq_42939143/article/details/126312156

版权

由于useState是异步函数在定时器里面进行useState的改变不能实时显示

解决方法有三种

最简单的是在useEffect的依赖项中添加这个state值的依赖

则异步问题解决

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

神医张郎中

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

React18入门到实战2023版

郭宝的博客

10-24

953

React 是由Meta公司研发，是一个用于构建Web和原生交互界面的库。jsx 是 Javascript和XML（HTML）的缩写，表示在JS代码中编写HTML模板结构，它是React中编写UI模板的方式。HTML的声明式模板写法JS的可编程能力概念：自定义Hook是以use打头的函数，通过自定义 Hook 函数可以用来实现逻辑的封装和复用。需求：实现点击toggle 显示/隐藏 this is div 这个组件/***/

setInterval轮训调用方法取不到useState里面的值

style_of_cooking的博客

11-28

392

使用setInterval创建的时候会获取整个函数执行的上下文环境，后续setInterval没有被清理所以在定时器里拿到的永远都是第一次被创建的时候的函数上下文，所以你拿不到最新的值。react 使用setInterval调用方法轮训调用接口的时候明明已经setState进去的值获取不到，只能拿到初始值。setAnchorSetting会缓存上次被set进去的值，但怎么说这种方法能解决问题但是不优雅。如果有更好的方法欢迎评论。例如取不到anchorSetting的值可以这样写；

1 条评论您还未登录，请先登录后发表或查看评论

usestate中的回调函数_React Hooks 中使用 setInterval 的若干方法

weixin_39771351的博客

12-10

2863

对于每个使用 React Hooks 的开发者来说，setInterval 是一个绕不过去的”坑“。由于React Hooks 特有的设计理念，如果用固有的思维模式去写 setInterval，很容易触发意想不到的 bug。当然避开 setInterval 的陷阱并不是一个难题，而且在不同的场景下有着不同的 setInterval 书写方式。接下来我们就对这些方法进行一个详细的总结。错误的写法如下...

react hooks的闭包陷阱(setInterval不生效)问题

眼里长着太阳，笑里全是坦荡

07-05

3403

在使用react hooks时, 会遇到这样的问题 const [count, setCount] = useState(1) useEffect(() => { setInterval(() => { console.log(count) }, 1000) //闭包陷阱 }, []) const handleClick = () => { setCount(count+1) } return ( <div o

解决setInterval+usestate实现倒计时出现闭包问题

热门推荐

landl_ww的博客

10-05

3万+

一遍就能学会的 react hooks 介绍 react hooks 是 React 16.8 的新增特性。它可以让我们在函数组件中使用 state 、生命周期以及其他 react 特性，而不仅限于 class 组件 react hooks 的出现，标示着 react 中不会在存在无状态组件了，只有类组件和函数组件对比存在即合理，hooks 也不例外，它的出现，就代表了它要解决一些 clas...

「React」React Hooks与setInterval的踩坑问题总结

老司机的后备箱

05-10

1593

一、需求我们希望有一个每一秒自动+1的定时器 function Counter() { let [count, setCount] = useState(0); useEffect(() => { let id = setInterval(() => { setCount(count + 1); }, 1000); return () => clearInterval(id); }, [count]); return <h1&gt

React Hooks：useState与useEffect的应用

而React Hooks通过提供一些新的钩子函数，将状态管理、副作用处理等功能从类组件中抽离出来，使得我们可以在函数组件中直接使用这些功能。 ## 1.2 为什么使用React Hooks 传统的React开发模式存在一些问题，比如...

react使用hooks启用setInterval中state值不变的问题

frozen_warrior的博客

04-19

5105

这里写使用自定义目录标题使用useEffect在函数组件中启用定时器存在问题的修复方式可用的修复方式1可用的修复方式2 使用useEffect在函数组件中启用定时器 function UseReducerTemplate(props){ const [count, setCount] = useState(0); useEffect(() => { let id = setInterval(() => { setCount(count + 1); }, 100

react 使用自定义hooks封装不会反复创建的定时器（setInterval）

weixin_44441196的博客

05-11

1387

react 需要通过useRef来创建定时器，否则清不干净，每次去写太麻烦，简单封装一下，直接代码自定义hooks import { useRef, useState } from 'react'; const useTimer = (step = 1) => { const timer = useRef(null) const [ num, setNum ] = useState(0) const start = () => { const timeout = se.

React在定时器中无法获取状态最新值

量子前端的博客

06-02

3012

在做轮播图组件时发现了一个问题，在setInterval中无法通过状态直接获取最新值，如：定时器一直都没有被清除，因此获取的状态始终是定时器被创建时候的状态。从代码和图片可以看到，定时器中打印的状态永远都是初始值，后面所改变的值虽然更新了，页面也发生了变化，但是我们从log中无法获取到实时状态。解决办法很简单，第一种，就是在setState中获取上一次状态，因为useState hooks提供了记录上一次状态的缓存回调，可以在这个回调中获取上一轮状态，如图：...

如何正确搭配使用 useEffect 与 setInterval

倪琛的博客

02-02

2569

目录背景失败的尝试哪里出错了？正确写法方法一方法二参考链接背景 useEffect 看似很简单，其实不然。由于没有理解 useEffect 的工作原理，我被狠狠坑了一回。事情是这样的：我想实现一个很简单的“物体下落”效果：物体的垂直位置用 positionY 这个 state 来表示，从上往下计算， positionY 越大就离屏幕顶端越远；设置一个 setInterval，每隔一小段时间（30 ms）就增加 positionY，然后基于 positionY渲染物体，从而实现“物体下落”的效果；

【setInterval应用】倒计时 -useEffect+setInterval实现轮询

congxue666的博客

09-03

1211

setInterval的有关的应用 1.倒计时 2.useEffect+setInterval实现轮询

在 React 中如何使用定时器

wbskb的博客

08-27

4605

在React中使用定时器通常有两种方式：使用setInterval和setTimeout函数。根据你的具体需求选择适合的定时器函数，并根据组件的生命周期来启动和清除定时器。

使用setInterval遇到的陷阱

qq_41347964的博客

09-19

4715

setInterval使用遇到的坑

react usestate 更新_React-useState原理

weixin_39868248的博客

12-31

1075

useState用法点击button会发生什么？分析：setNsetN一定会修改数据x, 将n+1存入xsetN一定会触发<App/>重新渲染(render)useStateuseState肯定会从x读取n的最新值x每个组件有自己的数据x, 我们将其命名为state最简单的useState的实现https://codesandbox.io/s/admiring-bash-utvzo问题...

React——浅析useState原理

麻球科技

05-24

3619

React hooks浅析useState实现原理

react 中如何用usestate储存props

04-16

对于这个问题，我可以回答：在 React 中，可以使用 useState 来声明一个状态并将 props 存入其中，代码示例如下： ```javascript import React, { useState } from 'react'; function MyComponent(props) { const...