state 更新未反映在 console.log()

Question

我有一個組件，我使用 useState 鈎子每秒遞減 state 變量中包含的值：

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時間確實每秒遞減，在開發人員工具中，我可以看到 state 正在更新。 但是decrementTime function 內的console.log()始終顯示值 10。

decrementTime function 中的if語句也總是檢查true ，因為在這個 function 中讀取時，state 似乎總是 10。

有什么我在這里想念的嗎？ 謝謝

Answer 1

我將decrementTime function 聲明從箭頭 function 更改為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;

Answer 2

那是因為您在setInterval中調用的 function 本身沒有更新。 您必須將 append 即 function 到useEffect掛鈎的依賴數組。 為了避免 eslint 警告，使用useCallback鈎子將decrementTime function 包裝起來（沒有區別，因為在這種情況下，function 無論如何都會在每次渲染時發生變化）。

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;