在 javascript 中设置作用域

Question

我想知道是否有人可以解释作用域相对于 let 关键字的工作原理。

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

export default function App() {
  const [counter, setCounter] = useState(0);
  let intervalId;

  const handleCounter = () => {
    intervalId = setInterval(() => {
      setCounter((prevState) => prevState + 1);
    }, 1000);
    console.log("intervalId in counter:", intervalId);
  };

  const handlePause = () => {
    console.log("intervalId:", intervalId);
    clearInterval(intervalId);
  };

  return (
    <div className="App">
      <h1>Counter-{counter}</h1>
      <button onClick={handleCounter}>Start</button>
      <button onClick={handlePause}>Pause</button>
    </div>
  );
}

这是我上面的代码，首先，我单击触发handleCounter()的开始按钮。当我尝试将 setInterval id 保存在“intervalId”变量（这是一个 let 变量）中，然后尝试清除间隔（如在 handlePause() 中）时。我在控制台中得到“未定义”并且计数器不会停止。

附言： 我知道，如果我尝试将 id 保存在某个状态，然后尝试清除间隔，这将是修复。但是，我更感兴趣的是为什么使用 let 函数作用域，它不起作用？

Answer 1

来自MDN：

let

声明声明可重新分配的块范围局部变量，可以选择将每个变量初始化为一个值。