使用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

您应该使用功能状态更新，因此不必编写setSec(sec+1)，而应编写setSec(prevSec => prevSec + 1)

请参阅React Hooks API以获取参考：https://reactjs.org/docs/hooks-reference.html#usestate

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

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 4

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>
</>
);
}