使用 setInterval 每秒递增变量 - 不更新

Question

在我的功能组件中，我定义了两个钩子 started:false 和 sec:0

let interval = null
const Home = () =>  {
    const [sec, setSec] = useState(0)
    const [started, setStarted] = useState(false)

所以顾名思义，我想每秒增加这个计数器。我有一个名为 setTimer 的方法，它应该每秒递增我的 sec。

function setTimer() {
  console.log(started)
  if (!started) {
    console.log(started)
    setStarted(true);
    interval = setInterval(() => {
      setSec(sec+1)
      console.log("ADDED",sec)
    }, 1000)
  }
}

但是秒计数器似乎永远不会超过 1。这有什么原因吗？

Answer 1

var setStarted = false;
setSec = 0;
function setTimer() {
  console.log(setStarted)
  if (!setStarted) {
    console.log(setStarted)
    setStarted = true;
    setInterval(() => {
      setSec +=1;
      console.log("ADDED",setSec);
    }, 1000)
  }
}

setTimer();

Answer 2

let started = false;
let sec = 0;

let setSec = function(seconds) { sec = seconds; }
let setStarted = function() { started = true; }

function setTimer() {
  console.log(started)
  if (!started) {
    setStarted(true);
    console.log(started)
    interval = setInterval(() => {
      setSec(sec+1)
      console.log("ADDED",sec)
    }, 1000)
  }
}

setTimer();

Answer 3

setInterval 已超过您状态的初始值（秒）。每次修改它时，您都在执行 setSec(0+1)，实际上是将其设置为 1。这就是陈旧状态的问题。

您可以使用 useRef 始终访问当前值。

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

export default function App() {
  const [sec, setSec] = useState(0);
  const [started, setStarted] = useState(false);

  let interval = null;
  let realSec = useRef(0);

  function setTimer() {
    console.log(started);
    if (!started) {
      console.log(started);
      setStarted(true);
      interval = setInterval(() => {
        setSec(realSec.current + 1);
        realSec.current++;
        console.log("ADDED", sec);
      }, 1000);
    }
  }

  return (
    <>
      <p>{sec}</p>
      <button onClick={setTimer}>X</button>
    </>
  );
}

Answer 4

您应该使用功能状态更新，所以不要 setSec(sec+1) 写 setSec(prevSec => prevSec + 1)

参考 React Hooks API：https://reactjs.org/docs/hooks-reference.html#usestate

使用 setInterval 每秒递增变量 - 不更新

using setInterval to increment variable every second - not updating

javascript

increment

setinterval

reactjs