Javascript 使用React:setInterval的计时器应用程序在每次渲染后都会被清除

我正在尝试创建一个简单的计时器应用程序，它会在点击按钮时开始增加秒数。我正在使用react钩子实现这一点

import React, { useState } from 'react'

function Timer() {

  const [seconds, setSeconds] = useState(0);

  const startTimer = () => {
    let timerID = setInterval(setSeconds((prevState) => prevState + 1), 1000);
  };

  return (
    <>
      <p> Seconds {seconds}</p>

      <button onClick={startTimer}> Start Timer </button>
    </>
  );
}


export default Timer;

import React，{useState}来自“React”
函数计时器（）{
常数[秒，设置秒]=使用状态（0）；
常数startTimer=（）=>{
设timerID=setInterval（setSeconds（（prevState）=>prevState+1），1000；
};
返回(
秒{秒}

启动计时器
);
}
导出默认定时器；

每次渲染后都会清除setInterval函数。理想情况下，它应该继续运行，直到显式清除为止。

---

每次单击启动计时器按钮，秒状态仅增加一次

方法要求调用一个函数。调用

setSeconds

，它会立即将秒数增加1，但是

setInterval

不能再次调用，因为它不是一个函数。使用箭头函数包装表达式：

() => setSeconds((prevState) => prevState + 1)

例如：

const{useState，Fragment}=React；
函数计时器（）{
常数[秒，设置秒]=使用状态（0）；
常数startTimer=（）=>{
设timerID=setInterval(
（）=>setSeconds（（prevState）=>prevState+1）//传递调用setSeconds的arrow函数
, 100);
}
返回(
秒{秒}

启动计时器
)
}
ReactDOM.render(
,
根
)

setInterval

需要一个函数作为第一个参数

为了避免内存泄漏，您需要清除上一个间隔

从“react-dom”导入ReactDOM；
从“React”导入React，{useState，useffect，useRef}；
函数计时器（）{
常数[秒，设置秒]=使用状态（0）；
const timerId=useRef（null）；
useffect（（）=>{
return（）=>stopTimer（）；
}, []);
常数startTimer=（）=>{
停止计时器（）；
timerId.current=setInterval(
（）=>setSeconds（prevState=>prevState+1），
1000
);
};
常量停止计时器=（）=>{
if（timerId.current！=null）{
清除间隔（timerId.current）；
}
};
返回(
秒{秒}

启动计时器
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）