[JAVA] [React.useRef] Que faire lorsque le dernier état ne peut pas être référencé dans l'écouteur d'événements

introduction

Il s'agit d'une solution de contournement lorsque «State» ne peut pas être géré correctement dans l'écouteur d'événements du composant de fonction.

Lorsque vous essayez de référencer l'état de React.useState () dans la fonction de rappel de l'écouteur d'événements, la valeur peut ne pas être à jour.

Exemples qui ne fonctionnent pas

  1. Déclarez un «État» appelé «compteur»
  2. Cliquez sur le bouton pour ajouter «+ 1» au «compteur»
  3. L'écouteur d'événements répondant au clic déclenche func ()
  4. Sortez la valeur de counter

Composant fonctionnel


// ①
const [counter, setCounter] = React.useState(0);

// ④
const func = () => {
  console.log(counter);
};

// ③
React.useEffect(() => {
  window.addEventListener("click", func);
}, []);

// ②
return (
  <button onClick={() => setCounter(counter + 1)}>
bouton
  </button>

** Dans cet exemple, la valeur sortie par ④ console.log (compteur) est toujours 0. ** ** Il est fixé à la valeur de counter au moment de l'enregistrement de l'écouteur d'événements, et la sortie ne change pas même si l'état est mis à jour.

Je ne sais pas combien de fois j'ai cliqué dessus ...

Utilisez ʻuseRef () `

Vous pouvez toujours vous référer au dernier statut en utilisant React.useRef ().

Des exemples qui fonctionnent



const [counter, setCounter] = React.useState(0);

//ajouter à
const counterRef = useRef(); //Créer un objet ref
counterRef.current = counter; //ref fait référence au compteur


const func = () => {
  //Réf de sortie
  console.log(counterRef.current);
};

// -----Ce qui suit est inchangé-----
React.useEffect(() => {
  window.addEventListener("click", func);
}, []);

return (
  <button onClick={() => setCounter(counter + 1)}>
bouton
  </button>

Au lieu d'utiliser counter dans le rappel, utilisez counterRef.current. En faisant cela, vous pouvez vous référer au dernier état.

Résumé

Si le dernier état n'est pas visible dans l'écouteur d'événements du composant de fonction, utilisez Ref pour référencer State au lieu d'utiliser State dans le rappel.

En faisant cela, vous pouvez vous référer au dernier état.

Recommended Posts

[React.useRef] Que faire lorsque le dernier état ne peut pas être référencé dans l'écouteur d'événements
Que faire si la commande adb ne peut pas être exécutée
Que faire lorsque l'erreur «La variable non statique x ne peut pas être référencée à partir d'un contexte statique» en Java. Enseignements tirés de la toute première étape de programmation Remarque 01
Que faire si le référentiel Git ne peut pas être affiché dans Azure Team Explorer pour Eclipse
Que faire lorsque les modifications du servlet ne sont pas reflétées
[Rails] Que faire lorsque les rails db: migrate ne peuvent pas être effectués car aucune table n'est référencée par la clé externe
Que faire lorsque CentOS ne peut pas être démarré avec VirtualBox sur Catalina
Que faire si IllegalStateException se produit dans PlayFramework
Que faire lorsque la valeur devient nulle dans le second getSubmittedValue () dans JSF Validator
[Ubuntu] Que faire lorsque MongoDB ne peut pas être démarré en raison d'une erreur SocketException
Que faire lorsque le certificat SSL a expiré
Que faire lorsque «Échec du chargement de la bibliothèque partagée JNI» s'affiche dans Eclipse
Que faire lorsque la méthode n'est pas trouvée dans f: ajax
Que faire lorsque vous ne pouvez pas appliquer d'opérateurs d'expression à la liaison de méthode
Que faire lorsque vous ne pouvez pas formater l'objet donné en tant que date dans JSF convertDateTime
[Tutoriel Rails Chapitre 2] Que faire lorsque vous faites une erreur dans le nom de la colonne
Que faire lorsque la "relation" hibernate_sequence "n'existe pas" dans la colonne ID de PostgreSQL + JPA
Que faire si une exception UnsupportedCharsetException se produit dans un JRE léger
[Rails] Que faire lorsque l'erreur Aucune base de données sélectionnée et Base de données inconnue apparaît dans db: migrate
[Débutant en programmation] Que faire lorsque les rails deviennent une erreur dans l'environnement de développement local
Que faire si la page Rails n'est pas affichée dans le didacticiel Rails 1.3.2
Que faire lorsque vous souhaitez connaître la position source où la méthode est définie dans binding.pry
Que faire lorsque Cloud 9 est plein dans le didacticiel Rails
Que faire à propos de l'erreur "Impossible de lire ou n'est pas un fichier ZIP valide"
Que faire si l'application n'est pas créée avec la dernière version de Rails installée lorsque les rails sont neufs
Que faire lorsqu'une exception javax.batch.operations.JobStartException se produit
Que faire si vous oubliez votre mot de passe root sur CentOS7
La première chose à faire lorsque vous voulez être satisfait d'Heroku sur GitHub avec Eclipse sur Java
Que faire si l'opération non autorisée s'affiche lors de l'exécution d'une commande dans le terminal
Que faire si JavaMail ne peut pas être utilisé avec OpenJDK 11 ou version ultérieure
[IOS] Que faire lorsque l'image est remplie d'une seule couleur
Que faire lorsque le préfixe c n'est pas lié dans JSP
Que faire lorsque l'hôte bloqué: "nom d'hôte" apparaît dans Ruby on Rails
Que faire si le processus Tomcat reste lorsque vous arrêtez Tomcat dans Eclipse
Remarques sur la marche à suivre lorsqu'une exception WebView ClassNotFoundException se produit dans JavaFX 12
Que faire lorsqu'une exception javax.el.PropertyNotWritableException se produit
Que faire lorsque la méthode non définie ʻuser_signed_in? '
Comment traduire le message d'erreur en japonais (que faire si vous ne pouvez pas vous connecter pour une raison quelconque)
Que faire lorsque vous pensez que vous ne pouvez pas Groovy-> Java avec IntelliJ IDEA CE
Que faire si les modifications ne sont pas reflétées dans le fichier manifeste JAR
[Grails] Une erreur s'est produite lors de l'exécution Que faire lorsque la CLI Grails ne démarre pas
Androd: Que faire à propos de "Le Royaume est déjà dans une transaction d'écriture dans"
Que faire si le chargement de l'URL SPA ne peut pas être détecté par WebView shouldOverrideUrlLoading
Que faire si l'installation de ffi échoue lors du lancement d'une application dans Rails
Que faire si le serveur Tomcat meurt
Que faire lorsque «Impossible de trouver» dans l’une des sources apparaît dans l’environnement de développement avec Docker × Rails × RSpec
Lorsque Eclipse ne parvient pas à démarrer le serveur
[Rails] Que faire lorsque vous souhaitez générer une erreur qui ne peut pas être annulée lorsque des restrictions de clé externe sont appliquées
Que faire lors du débogage "Source non trouvée"
Qu'utilisez-vous lors de la conversion en String?
Que faire si vous ne pouvez pas obtenir le texte d'un élément dans Selenium
Que faire lorsque l'adresse déjà utilisée est affichée après l'exécution des rails
Que faire si vous ne pouvez pas exécuter avec la commande "nom du package Java / nom de la classe"
Que faire si l'installation du gem de débogage échoue
[Android] Solution lorsque l'appareil photo ne peut pas être démarré sur Android 9
Que faire si le serveur Rails ne peut pas démarrer