useState 未更新

Question

你能告訴我為什麼我的 useState 仍然是空的嗎？它不想更新它。我正在使用 setInteraval 和函數來更新數據，並且希望在當前時間設定 useState，但 useState 忽略 formatTime 中的 setTimeOut(res) 。 你能告訴我如何修復它嗎？

編輯：如果我將數字放入 useState

#

const [timeOut, setTimeOut] = useState(30)

它會在第二秒出現，然後就消失了，我有空的字段。 好像setInterval刪除了裡面的所有內容，那麼要如何修復呢？

const Timer = ({item}) => {

  const [timeOut, setTimeOut] = useState('')  // << doent want to update it from 
                                              //         formatTime function
  console.log(timeOut) // still empty


useEffect(() => {
    if (status !== 'unPaid') return;

    const timer = window.setInterval(() => {
        setTimeOut(formatTime(createdAt));
    }, 1000);

    return () => window.clearInterval(timer);
}, [createdAt, status]);



const formatTime = (time) => {
         console.log(time) //  2023-07-25T23:39:39.253Z

         // const timer = new Date(time).getTime() + 1800000
          const timer = new Date(time).getTime() + 250000
          let countDown = new Date().getTime()
          let distance = timer - countDown

          let min = Math.floor((distance % (1000*60*60) / (1000*60)))
          let sec = Math.floor((distance % (1000*60) / (1000)))
          let res = Math.abs(min) + ':' + Math.abs(sec)
          console.log(res)   //  4:50
          setTimeOut(res)   // <<<<<   it doesnt want to apdate my useState
           
 }

Answer 1

這很可能是因為您在超時內設定狀態。

另一個問題是您在其內部呼叫 setTimeout。

相反，使用一個根據先前狀態傳回新值的函數。

useState 接受一個函數，該函數接收 previousState 作為參數

const [count, setCount] = useState(0);

useEffect(() => {
  window.setTimeout(() => {
    setCount((prevValue) => {
      return prevValue + 1; // what you return here, will be the new state.
    })
  }, 1000)
}, []);

Answer 2

看起來問題是 setInterval 每秒運行一次，並且每秒更新狀態（timeOut）。

此外，在formatTime函數中，您使用的是當前時間（new Date().getTime()）而不是createdAt時間。因此，狀態每秒不斷更新為新值。

這是更新後的程式碼。

const Timer = ({ item }) => {
  const [timeOut, setTimeOut] = useState('');

  useEffect(() => {
    if (status !== 'unPaid') return;

    const timer = window.setInterval(() => {
      setTimeOut(formatTime(createdAt));
    }, 1000);

    return () => window.clearInterval(timer);
  }, [createdAt, status]);

  const formatTime = (time) => {
    const timer = new Date(time).getTime() + 250000;
    const currentTime = new Date().getTime();
    const distance = timer - currentTime;

    let min = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    let sec = Math.floor((distance % (1000 * 60)) / 1000);
    let res = Math.abs(min) + ':' + Math.abs(sec).toString().padStart(2, '0');
    return res;
  };

  return <div>{timeOut}</div>;
};