useState nicht aktualisiert

Question

Können Sie mir sagen, warum mein useState immer noch leer ist? Es möchte es nicht aktualisieren. Ich verwende setInteraval und eine Funktion zum Aktualisieren von Daten und möchte useState zum aktuellen Zeitpunkt festlegen, aber useState ignoriert formatTime in setTimeOut(res) . Können Sie mir sagen, wie ich das Problem beheben kann?

EDIT: Wenn ich die Nummer in useState stecke

const [timeOut, setTimeOut] = useState(30)

Es erscheint für eine Sekunde und verschwindet dann und ich habe leere Felder. Es scheint, als ob setInterval alles darin löscht. Wie kann man das Problem beheben?

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