為什么當我調用函數“StopTimer”函數時我的變量“intervalId”沒有更新值？

Question

這是我的簡單代碼：

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>
  );
}

這是錯誤的表示

我按下Start Time 按鈕，然后按下Stop Time Button ，但是我在 stopTimer 函數中的變量 intervalId 沒有從 setInterval 函數中獲取更新的值。 為什么？。

Answer 1

因為intervalId與調用startTimer時作用域內的變量不同。 它將在所有后續渲染中undefined 。 （當time改變狀態時引起）

在 React 中，如果你想在組件的整個生命周期中“保持一個值”，你可以為它使用ref ：

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

Answer 2

由於每次更改狀態 ( setTime ) 時都會調用App ，因此您將獲得局部變量的新值。

一種選擇是在您的狀態中包含變量。

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

  function startTimer() {
    setIntervalId(intervalId => setInterval(() => {
      setTime(time => time + 1);
    }, 1000));
  }

  function stopTimer() {
    clearInterval(intervalId);
  }

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