useState tidak dikemas kini

Question

Bolehkah anda beritahu saya mengapa useState saya masih kosong? Ia tidak mahu mengemas kininya. Saya menggunakan setInteraval dan fungsi untuk mengemas kini data dan mahu menetapkan useState pada masa semasa, tetapi useState mengabaikan formatTime dalam setTimeOut(res) . Bolehkah anda memberitahu saya bagaimana untuk memperbaikinya?

EDIT: Jika saya memasukkan nombor ke useState

const [timeOut, setTimeOut] = useState(30)

Ia muncul seketika dan kemudian hilang dan saya mempunyai medan kosong. Nampaknya setInterval memadamkan segala-galanya di dalam, jadi bagaimana untuk membetulkannya?

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

Ini berkemungkinan besar kerana anda menetapkan keadaan dalam tamat masa.

Masalah lain ialah anda memanggil setTimeout di dalamnya.

Sebaliknya, gunakan fungsi yang mengembalikan nilai baharu berdasarkan keadaan sebelumnya.

useState 接受一个函数，该函数接收 previousState sebagai parameter

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

Nampaknya masalahnya ialah setInterval berjalan setiap saat dan mengemas kini status (timeOut) setiap saat.

Selain itu, dalam fungsi formatTime, anda menggunakan masa semasa (New Date().getTime()) dan bukannya masa yang diciptaAt time. Oleh itu, status sentiasa dikemas kini dengan nilai baharu setiap saat.

Ini adalah kod yang dikemas kini.

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