【无标题】useEffect卸载组件却没有卸载掉定时器出现的问题

最新推荐文章于 2024-07-31 09:00:00 发布

王耐存

最新推荐文章于 2024-07-31 09:00:00 发布

阅读量452

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_43512623/article/details/127630108

版权

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at Filled (http://localhost:8000/umi.js:82655:70)
at div
at IndexPage
at Route
at Switch
at Router (http://localhost:8000/umi.js:70271:30)
at RouterComponent (http://localhost:8000/umi.js:9378:23)
at SrcUmiPlugininitialstateProvider (http://localhost:8000/umi.js:81476:24)
at SrcUmiPluginmodelProvider (http://localhost:8000/umi.js:81738:23)

得把定时器卸载掉

import React from 'react';
import ReactDom from 'react-dom'

function Filled() {
  const [count,setCount] = React.useState(0);
  const [couTount,setCouTount] = React.useState("Tom");

    function add() {
      //第一种写法  setCount以箭头函数的方式进行写
      // setCount((count)=>{
      //   return count + 1;
      // })
    //  第二种写法
      // @ts-ignore
      setCount(()=>{
        return count+1
      })
    }

    function changeName() {
      // @ts-ignore
      // setCouTount((couTount)=>{
      //   return   "Jurrey"
      // })
      setCouTount("Jerry")
      // @ts-ignore

    }
  //  useEffect  相当于模拟react的生命周期钩子
  // @ts-ignore
  React.useEffect(()=>{
    console.log("11111",count)
  let times =  setInterval(()=>{
   setCount((count)=>{
     return count + 1;
   })
    return ()=>{
     clearInterval(times)
    }
    },1000)
  },[])
    function unmont() {
      // @ts-ignore
      ReactDom.unmountComponentAtNode(document.getElementById("root"))

}

return (
    <div>
      <h2>{count}</h2>
      <h1>{couTount}</h1>
      <button onClick={add}>点我加1</button>
      <button onClick={changeName}>点我更换名字</button>
      <button onClick={unmont}>卸载组件</button>
      </div>
  )

}
export default Filled ;