Javascript React组件意外地进行反应

以下是一个简单的react组件：

import React from "react";
import { useState } from "react";


export default function Comp() {

  let [count, setCount] = useState(1);

  function countUp(){
    setCount(count + 1);
  }

  setInterval(countUp, 1000);

  return <h2>{count}</h2>
}

从“React”导入React；
从“react”导入{useState}；
导出默认函数Comp（）{
let[count，setCount]=useState（1）；
函数倒计时（）{
设置计数（计数+1）；
}
设置间隔（倒计时，1000）；
返回{count}
}

我以为计数器每秒钟都会上升 但出于某种原因，十二秒后，有些事情开始出问题

请看这里：

---

有人能解释一下吗？

您应该使用

useffect

hook来正确设置它。我可以举个例子

import React，{useState，useffect}来自“React”；
导出默认函数Comp（）{
const[count，setCount]=useState（1）；
useffect（（）=>{
常量间隔=设置间隔（（）=>{
setCount（state=>state+1）；
}, 1000);
return（）=>clearInterval（interval）；
}, []);
返回{count}
}

几张便条

通常，您更喜欢

const

而不是

let

，但在分解来自React的内容时，这是必需的

我建议阅读React文档，了解有关

useEffect

的更多信息

基本上，

useffect

允许您获得与类组件的

componentDidMount

和

componentDidUpdate

生命周期方法类似的结果。此外，在这种特定情况下，通过在

useffect

callback中返回函数，我们确保在清理时清除计划的回调，也就是在每次运行之后。这实际上避免了将许多

setInterval

堆叠在彼此之上的混乱

另外，当您

setCount

时，最好使用回调表单获取上一个状态，因为它总是最新的。

调用setInterval（）时，它返回一个间隔id。您的代码没有保存变量，因此无法重置它。在较小的迭代中，您不会看到每次迭代的更改。但是，当调用setInterval（）的次数从0增加到N时，会启动更多的计时器，并且当它们增加时，您会很快看到数字的闪烁，因为每个间隔都在改变

计数的状态

换句话说，随着时间的推移，您正在创建越来越多的计时器，而不是创建一次性使用的计时器。您需要调用
clearInterval（timer\u id\u goes\u here）
来清除计时器。请参阅下面链接中的代码示例