Javascript 在ReactJs中生成计时器/倒计时代码时遇到问题

我遇到了一个问题，使倒计时计时器将开始点击开始按钮，它将停止点击停止按钮。我已经在javascript上做了这件事，但是当我谈到reactJs时，我就不能了。我提供所有代码。请检查问题出在哪里

import React, { useState } from "react";
import "./styles.css";

const App = () => {
  const [data, setData] = useState(0);
  let interval;
  return (
    <>
      <div id="Message"> {data} </div>
      <button
        onClick={() => {
          interval = setInterval(() => {
            setData(data + 1);
          }, 1000);
        }}
      >
        Start
      </button>
      <button
        onClick={() => {
          clearInterval(interval);
        }}
      >
        End
      </button>
    </>
  );
};
export default App;

import React，{useState}来自“React”；
导入“/styles.css”；
常量应用=（）=>{
const[data，setData]=useState（0）；
让间隔；
返回(
{data}
{
间隔=设置间隔（（）=>{
setData（数据+1）；
}, 1000);
}}
>
开始
{
间隔时间；
}}
>
终点
);
};
导出默认应用程序；

试试这个。基本上也使用状态来跟踪间隔

import React, { useState } from "react";
import "./style.css";

function App() {
  const [data, setData] = useState(0);
  const [intervalInstance, setIntervalInstance] = useState(null);
  return (
    <>
      <div id="Message"> {data} </div>
      <button
        onClick={() => {
          const interval = setInterval(() => {
            setData(prevData => prevData + 1);
          }, 1000);
          setIntervalInstance(interval);
        }}
      >
        Start
      </button>
      <button
        onClick={() => {
          clearInterval(intervalInstance);
        }}
      >
        End
      </button>
    </>
  );
}
export default App;

import React，{useState}来自“React”；
导入“/style.css”；
函数App（）{
const[data，setData]=useState（0）；
常量[intervalInstance，setIntervalInstance]=useState（null）；
返回(
{data}
{
常量间隔=设置间隔（（）=>{
setData（prevData=>prevData+1）；
}, 1000);
设置间隔（间隔）；
}}
>
开始
{
净间隔（间隔）；
}}
>
终点
);
}
导出默认应用程序；

问题

每个渲染周期都会重新声明计时器/间隔引用，因此，一旦有任何事情导致组件重新渲染，就永远无法清除它

间隔回调中的

数据

状态值的封装已过时

解决方案

使用React ref保持间隔参考

使用功能状态更新正确更新

数据

计数器

代码

const-App=（）=>{
const[data，setData]=useState（0）；
const intervalRef=useRef（）；
返回(
{data}
{
intervalRef.current=setInterval（（）=>{
setData（c=>c+1）；
}, 1000);
}}
>
开始
{
clearInterval（间隔参考电流）；
}}
>
终点
);
};

演示

const App = () => {
  const [data, setData] = useState(0);
  const intervalRef = useRef();

  return (
    <>
      <div id="Message"> {data} </div>
      <button
        onClick={() => {
          intervalRef.current = setInterval(() => {
            setData(c => c + 1);
          }, 1000);
        }}
      >
        Start
      </button>
      <button
        onClick={() => {
          clearInterval(intervalRef.current);
        }}
      >
        End
      </button>
    </>
  );
};