Pourquoi ma fonction React `onClick` se déclenche-t-elle pendant le rendu ?

Comprendre l'exécution prématurée de la fonction onClick de React

Dans React, il est crucial de comprendre pourquoi la fonction onClick peut se déclencher pendant le rendu. Ce phénomène peut se produire lors de la transmission de valeurs aux composants enfants.

Problème :

Lors du mappage sur une liste d'objets et de l'utilisation de la fonction map() pour les afficher, le Le bouton associé à chaque objet invoque la fonction onClick prématurément lors rendu.

Cause :

La clé de ce problème réside dans la manière dont la fonction onClick est transmise. Dans le code fourni, la ligne suivante est responsable de ce comportement :

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

Ici, l'attribut onClick appelle directement la fonction en ajoutant des parenthèses. Cela signifie que le gestionnaire onClick est exécuté immédiatement, provoquant l'exécution de la fonction pendant le rendu.

Solution :

Pour éviter une exécution prématurée, vous devez transmettre la fonction elle-même à onClick au lieu de l'invoquer. Ceci peut être réalisé en utilisant une fonction de flèche, introduite dans ES6. Voici le code corrigé :

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

Explication :

Dans cette ligne, nous utilisons une fonction flèche pour définir une fonction anonyme concise qui est transmise à onClick. Lorsque vous cliquez sur le bouton, la fonction fléchée invoquera alors la fonction removeTaskFunction avec l'objet todo. Cette approche garantit que la fonction onClick n'est déclenchée que lorsque le bouton est cliqué, pas pendant le 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!