javascript - 为什么当我调用函数“StopTimer”函数时，变量“intervalId”没有更新值？

这是我的简单代码：

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

function App() {
  const [time, setTime] = useState(0);
  var intervalId;

  function startTimer() {
    intervalId = setInterval(() => {
      setTime(time => time + 1);
    }, 1000);
    console.log("My interval id is: ", intervalId);
  }

  function stopTimer() {
    console.log("Clearing intervalId", intervalId);
    clearInterval(intervalId);
  }

  return (
    <div className="App">
      <div>{time}</div>
      <div>
        <button onClick={startTimer}>Start time</button>
        <button onClick={stopTimer}>Stop time</button>
      </div>
    </div>
  );
}

Here is the representation of the error

我按了“开始时间”按钮，然后按了“停止时间”按钮，但是stopTimer函数中的变量intervalId不能从setInterval函数中获取更新的值。为什么？。

最佳答案

因为intervalId与调用startTimer时作用域内的变量不同。在所有后续渲染中它将为undefined。 （当time更改状态时引起）

在React中，如果您想在组件的整个生命周期中“保留一个值”，可以使用ref：

  // ....
  var intervalId = React.useRef();
  // ....
  intervalId.current = setInterval(() => {
  // ...
  clearInterval(intervalId.current);