Pourquoi ma fonction React onClick se déclenche-t-elle lors du rendu ?

Déclenchement de la fonction React onClick lors du rendu

Lors de la création de composants React qui restituent des listes d'objets, il est courant de transmettre à la fois les objets et une fonction pour les supprimer comme accessoires. Bien que l'utilisation de .map() pour parcourir les objets soit standard, cela peut entraîner le déclenchement prématuré de la fonction onClick pendant le rendu.

Dans le code fourni, le problème vient du fait que la fonction removeTaskFunction est appelée directement. dans le gestionnaire d'événements onClick. Cela signifie que la fonction est exécutée dès que le composant est rendu, et non lorsque le bouton est cliqué.

Solution

Pour résoudre ce problème, la fonction doit être passée comme fonction de flèche vers onClick, garantissant qu'elle n'est pas invoquée prématurément. La ligne corrigée devrait ressembler à :

<button type="submit" onClick={() => this.props.removeTaskFunction(todo)}>Submit</button>

Les fonctions fléchées, introduites dans ES6, retardent l'exécution jusqu'à ce que la fonction soit appelée. Dans React 0.13.3 ou version ultérieure, les fonctions de flèche sont entièrement prises en charge. En utilisant une fonction de flèche, le gestionnaire onClick ne se déclenchera que lorsque le bouton sera réellement cliqué, comme prévu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!