当前位置: 首页 > news >正文

React:实现一个定时器计数器,每秒自动+1

需求:实现一个定时器计数器,每秒自动+1

import React, { useState, useEffect } from "react";export default function App() {let [count, setCount] = useState(0);useEffect(() => {let timer = setInterval(() => {setCount(count + 1);}, 1000);return () => {clearInterval(timer);};}, []);return <div>{count}</div>;
}

以上写法有一个问题,页面会永远停留在数字1,并不会发生变化

正确的写法如下

import React, { useState, useEffect } from "react";export default function App() {let [count, setCount] = useState(0);useEffect(() => {let timer = setInterval(() => {setCount((preValue) => {return preValue + 1;});}, 1000);return () => {clearInterval(timer);};}, []);return <div>{count}</div>;
}

方法签名

setCount(value)setCount(preValue=>newValue)

参考文章

  1. 「React」React Hooks与setInterval的踩坑问题总结
  2. https://react.docschina.org/reference/react/useState
http://www.lryc.cn/news/225201.html

相关文章:

  • rocksdb 中 db_bench 的使用方法
  • 【前端】TypeScript核心知识点讲解
  • 【工具推荐】一键多平台文章发布神器推荐(免费)
  • PDF有限制密码,不能复制怎么办?
  • 【原创学位论文】基于python和定向爬虫的商品比价系统.docx
  • 【Proteus仿真】【STM32单片机】汽车尾灯控制设计
  • 多线程—锁
  • uniapp使用vue
  • 能源监测管理系统有哪些作用与效果?
  • 数据分析是什么?
  • 【kafka】Java客户端代码demo:自动异步提交、手动同步提交及提交颗粒度、动态负载均衡
  • 【Git】Gui图形化管理、SSH协议私库集成IDEA使用
  • AIX5.3安装weblogic10.3
  • 聊聊logback的FixedWindowRollingPolicy
  • 详解机器学习最优化算法
  • 文件缓存的读写
  • Debian 修改主机名
  • 多线程返回计时问题代码案例
  • 【STM32】STM32的Cube和HAL生态
  • 汇编-EQU伪指令(数值替换)
  • 超声波俱乐部分享:Enter AI native application
  • 软件测试项目实战经验附视频以及源码【商城项目,app项目,电商项目,银行项目,医药项目,金融项目】(web+app+h5+小程序)
  • HarmonyOS应用开发-ArkTS基础知识
  • mybatis嵌套查询子集合只有一条数据
  • Github 生成SSH秘钥及相关问题
  • STM32外设系列—MPU6050角度传感器
  • 网站小程序分类目录网源码系统+会员登录注册功能 带完整搭建教程
  • 【Linux网络】手把手实操Linux系统网络服务DHCP
  • Huggingface网页解析和下载爬虫
  • C# Winform 自定义带SWITCH的卡片