无法在setInterval内更新状态

Question

我试图显示两个日期的差异，并在我的组件中显示，最初我设置间隔为60秒，但现在我有一秒调试，显然它不想更新状态。我们的想法是在开始时启动一次，然后每60秒打一次勾。

const calculateTimeDifference = () => {
const currentDate = dayjs()
const reservationFinishDate = dayjs('2023-03-30T11:00:00.000Z')
const diff = reservationFinishDate.diff(currentDate, 'minutes', true)
const hours = Math.floor(diff / 60)
const minutes = (dayjs().minute(diff) as any).$m
setDuration(`${hours}h ${minutes}m`)
}
useEffect(() => {
calculateTimeDifference()
const interval = setInterval(calculateTimeDifference, 1000)
return () => clearInterval(interval)
}, [duration])

Answer 1

这个答案是受到useInterval钩子的启发(这可能是一个解决方案):

const calculateTimeDifference = () => {
const currentDate = dayjs();
const reservationFinishDate = dayjs("2023-03-30T11:00:00.000Z");
const diff = reservationFinishDate.diff(currentDate, "minutes", true);
const hours = Math.floor(diff / 60);
const minutes = (dayjs().minute(diff) as any).$m;
setDuration(`${hours}h ${minutes}m`);
};
const savedFunction = useRef(calculateTimeDifference);
useEffect(() => {
const id = setInterval(() => savedFunction.current(), 1000);
return () => clearInterval(id);
}, []);