useState non mis à jour

Question

Pouvez-vous me dire pourquoi mon useState est toujours vide ? Il ne veut pas le mettre à jour. J'utilise setInteraval et une fonction pour mettre à jour les données et je souhaite définir useState à l'heure actuelle, mais useState ignore formatTime dans setTimeOut(res) . Pouvez-vous me dire comment y remédier ?

EDIT : Si je mets le numéro dans useState

const [timeOut, setTimeOut] = useState(30)

Il apparaît une seconde puis disparaît et j'ai des champs vides. Il semble que setInterval supprime tout ce qu'il contient, alors comment y remédier ?

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

Cela est probablement dû au fait que vous définissez l'état dans un délai d'attente.

Un autre problème est que vous appelez setTimeout à l'intérieur.

Utilisez plutôt une fonction qui renvoie une nouvelle valeur basée sur l'état précédent.

useState 接受一个函数，该函数接收 previousState comme paramètre

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

On dirait que le problème est que setInterval s'exécute toutes les secondes et met à jour le statut (timeOut) toutes les secondes.

De plus, dans la fonction formatTime, vous utilisez l'heure actuelle (new Date().getTime()) au lieu de l'heure CreateAt. Par conséquent, le statut est constamment mis à jour avec de nouvelles valeurs chaque seconde.

Voici le code mis à jour.

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