状态更新不会反映在控制台.log()

Question

我有一个组件，在该组件中，我使用useState钩子每秒递减一个状态变量中包含的值：

import React, { useEffect, useState } from "react";
import { FC } from "react";
interface ITimerProps {
remainingSeconds: number;
}
const Timer: FC<ITimerProps> = ({ remainingSeconds = 10 }) => {
const [remainingTime, setRemainingTime] = useState(remainingSeconds);
useEffect(() => {
const timer = setInterval(() => {
decrementTime();
}, 1000);
return () => {
clearInterval(timer);
};
}, [remainingSeconds]);
function decrementTime  (): void  {

if (remainingTime > 0) {
setRemainingTime((currentTime) => currentTime - 1);
}
console.log("function gets called, state is : " + remainingTime);
};
return <div>{remainingTime}</div>;
};
export default Timer;

得到渲染的remainingTime确实每秒都在减少，在开发人员工具中，我可以看到状态正在更新。但是decrementTime函数内部的console.log()总是显示值10。

decrementTime函数中的if语句也总是检查true，因为在该函数中读取时，状态似乎总是10。

我这里有什么东西不见了吗？感谢

Answer 1

这是因为您在setInterval中调用的函数本身没有更新。您必须将该函数附加到useEffect钩子的依赖数组中。为了避免esint警告，用CCD_ 10钩子包装CCD_。

import React, { useCallback, useEffect, useState } from "react";
import { FC } from "react";
interface ITimerProps {
remainingSeconds: number;
}
const Timer: FC<ITimerProps> = ({ remainingSeconds = 10 }) => {
const [remainingTime, setRemainingTime] = useState(remainingSeconds);
const decrementTime = useCallback(() => {
if (remainingTime > 0) {
setRemainingTime((currentTime) => currentTime - 1);
}
console.log("function gets called, state is : " + remainingTime);
}, [remainingTime]);
useEffect(() => {
const timer = setInterval(() => {
decrementTime();
}, 1000);
return () => clearInterval(timer);
}, [remainingSeconds, decrementTime]);
return <div>{remainingTime}</div>;
};
export default Timer;

Answer 2

我将decrementTime函数声明从箭头函数更改为function decrementTime(){}以使其被提升，并将其添加到useEffect依赖数组中，现在我得到了正确的行为：

import React, { useEffect, useState } from "react";
import { FC } from "react";
interface ITimerProps {
remainingSeconds: number;
}
const Timer: FC<ITimerProps> = ({ remainingSeconds = 10 }) => {
const [remainingTime, setRemainingTime] = useState(remainingSeconds);
useEffect(() => {
const timer = setInterval(() => {
decrementTime();
}, 1000);
return () => {
clearInterval(timer);
};
}, [remainingSeconds,decrementTime]);
function decrementTime(): void {
if (remainingTime > 0) {
setRemainingTime((currentTime) => currentTime - 1);
}
console.log("function gets called, state is : " + remainingTime);
}
return <div>{remainingTime}</div>;
};
export default Timer;