2025年3月25日 星期二 甲辰(龙)年 月廿四 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

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

时间:05-22来源:作者:点击数:37

需求:实现一个定时器计数器,每秒自动+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)
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门