react解决useEffect中添加setInterval定时器无法正常执行

问题描述:

初始化useEffct中添加定时器,页面上显示10-0倒计时:

import React,{useEffect, useState} from 'react'

export default function DepartList() {
  let [num,setNum] =useState<any>(10)
  useEffect(() => {
    let timer = setInterval(() => {
      setNum(()=>{
        if (num > 0) {
          setNum ( num-- )
        }
        return num
      })
    }, 1000)
    return () => {
    	// 每次执行新的 useEffect 时,之前的 useEffect 会被清理
    	// 这个函数会被调用,从而清除之前的 setInterval 计时器
        clearInterval(timer);
    };
  }, [num])
  return (
    <div>
     {num}
    </div>
  )
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React ,如果在 useEffect 使用定时器设置 useState 的值,可能会导致 useState 的值不生效,或者页面不重新渲染的问题。这是由于 useEffect 内的函数是在组件渲染之后才会执行,而定时器内的代码是异步的,可能会在 useEffect 函数之后执行,导致 useState 的值不生效。此外,即使 useState 的值被更新了,也不一定会触发页面重新渲染,这是因为 React 使用了一些优化手段,只有在必要的情况下才会重新渲染页面。 为了解决这个问题,可以使用 useRef 钩子函数来存储定时器的 ID,然后在组件卸载时清除定时器。另外,可以使用 useCallback 钩子函数来定义定时器回调函数,以确保每次渲染都使用相同的回调函数。 下面是一个示例代码: ```javascript import React, { useState, useEffect, useRef, useCallback } from "react"; function App() { const [count, setCount] = useState(0); const timerId = useRef(null); const handleTimer = useCallback(() => { setCount(count => count + 1); }, []); useEffect(() => { timerId.current = setInterval(handleTimer, 1000); return () => clearInterval(timerId.current); }, [handleTimer]); return <div>{count}</div>; } export default App; ``` 在这个示例,我们使用 useRef 钩子函数来存储定时器的 ID。在 useEffect ,我们使用 useCallback 钩子函数来定义定时器回调函数,并将其作为依赖项传递给 useEffect,以确保每次渲染都使用相同的回调函数。在 useEffect ,我们使用 setInterval 函数来设置定时器,并在 return 语句使用 clearInterval 函数来清除定时器。这样,即使定时器代码在 useEffect 函数之后执行,我们也可以确保定时器被正确清除,并且 useState 的值可以正确更新。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值