Je veux afficher une erreur pendant quelques secondes en réagissant à 3 conditions ?

Question

Je suis en train d'apprendre React et j'ai une situation où je veux afficher un message d'erreur pendant quelques secondes et où les trois conditions suivantes doivent être remplies.

Premier cas : Si le message est vide (c'est-à-dire qu'il n'y a pas d'erreur). Ajustez-le comme il convient.

Deuxième cas : En cas d'erreur, le message s'affiche et disparaît au bout de 5 secondes.

Troisième cas : Il s'exécute à chaque fois que message changements. Ajuster selon les besoins.

Merci de m'aider à résoudre ce problème.

Answer 1

La réponse à vos questions est :

const [visible, setVisible] = useState(false)

useEffect(() => {
  // CASE 1 :message is empty (meaning no errors). Adjust as needed
  if(!message){
    setIsVisible(false)
    return
  }

  //CASE 2: error exists. Display the message and hide after 5 secs

  setIsVisible(true)
  const timer = setTimeout(() => {
     setIsVisible(false)
  }, 5000);
  return () => clearTimeout(timer);
}, [message]) // CASE 3 : executes every time `message` changes. Adjust as needed

J'espère que cela répondra à vos besoins.

Bon codage !