javascript - SetInterval 仅在第一次运行

标签 javascript reactjs

我学习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

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

最佳答案

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

当您单击时,您会调用 setInterval ,该函数会在上次渲染的 time 内关闭

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

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


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

setTime(currentTime => currentTime - 1);

关于javascript - SetInterval 仅在第一次运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70937777/

相关文章:

javascript - React.isValidElement 误报

reactjs - React Redux 处理每个组件特有的错误/成功消息的正确方法

css - 来自未应用于新组件的单独 CSS 文件的样式

javascript - 如何使用 NodeJS 下载 pdf 并将其发送到客户端?

javascript - JavaScript 中的客户端服务器端

JavaScript 命名空间对象字面量

javascript - 为什么我在这个三元赋值中总是得到 null?

reactjs - 接下来 JS 13 必须刷新才能看到 css 更改

javascript - Facebox 只能使用一次

javascript - 通过 ajax JSON 获取未定义