您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

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

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

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