Pourquoi une fonction onClick se déclenche-t-elle lors du rendu dans React et comment l'empêcher ?

Pourquoi une fonction onClick se déclenche-t-elle lors du rendu dans React et comment l'empêcher ?

Lors du passage d'une liste d'objets et d'une fonction de suppression à un composant enfant et en utilisant une fonction .map() pour afficher les objets, on remarque que la fonction onClick du bouton se déclenche pendant le rendu, ce qui ne devrait pas se produire.

Pour résoudre ce problème et empêcher la fonction onClick de se déclencher lors du rendu :

Explication :

Dans le code d'origine, l'événement onClick handler est appelé directement au lieu d’être passé comme référence à la fonction. Cela signifie que la fonction est exécutée lorsque le composant est rendu, plutôt que lorsque le bouton est cliqué.

Solution :

Pour résoudre ce problème, utilisez une fonction fléchée comme donc :

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

Les fonctions fléchées, introduites dans ES6, permettent de définir des fonctions anonymes sans avoir à déclarer explicitement le mot-clé function. Dans ce cas, la fonction flèche n'est pas appelée tant que le bouton n'est pas cliqué, empêchant la fonction onClick de se déclencher lors du rendu.

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!