javascript - SetInterval 只在第一次运行

Question

我学习 javascript，react，我试着从 10 数到 0，但不知何故计时器只运行到 9，我认为 setInterval 在我们设置的每 n 次运行(n 可以是 1000 毫秒，2000 毫秒......)

这是代码

import "./styles.css";
import React, { useState } from "react";
export default function App() {
  const [time, setTime] = useState(10);

  const startCountDown = () => {
    const countdown = setInterval(() => {
      setTime(time - 1);
    }, 1000);
    if (time === 0) {
      clearInterval(countdown);
    }
  };

  return (
    <div>
      <button
        onClick={() => {
          startCountDown();
        }}
      >
        Start countdown
      </button>
      <div>{time}</div>
    </div>
  );
}

代码如下: https://codesandbox.io/s/class-component-ujc9s?file=/src/App.tsx:0-506

请解释一下，我很困惑，谢谢

Answer 1

time 是每次组件呈现时从状态(默认传递给 useState)读取的值。

当您点击时，您会调用 setInterval 并使用一个函数关闭来自上次渲染的 time

从那时起，每次渲染组件时，它都会从状态中读取一个新的 time 值。

不过，间隔仍在使用 original 变量，它仍然是 10。

---

如果您传入回调，状态函数将为您提供状态的当前值。因此，请使用它而不是 closed over 变量。

setTime(currentTime => currentTime - 1);