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.
func ()counterComposant 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 ...
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.
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.