javascript - SetInterval 仅在第一次运行

Question

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

这是代码

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 值。

尽管如此，间隔仍然适用于原始变量，它仍然是10。

---

如果您传入回调，状态函数将为您提供状态的当前值。因此，请使用它来代替封闭变量。

setTime(currentTime => currentTime - 1);