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

Déclenchement de la fonction React onClick lors du rendu

Un problème courant survient lors de l'utilisation de la fonction onClick de React dans un composant qui reçoit des données d'un composant parent. Lorsque la fonction onClick est mal définie, elle peut se déclencher involontairement lors du rendu au lieu d'attendre un événement de clic de l'utilisateur.

Pour comprendre le problème, analysons l'exemple de code fourni :

var taskNodes = this.props.todoTasks.map(function(todo) {
    return (
        <div>
            {todo.task}
            <button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button>
        </div>
    );
}, this);

Le problème réside dans le gestionnaire d'événements onClick. Actuellement, this.props.removeTaskFunction(todo) est appelé directement, ce qui exécute la fonction immédiatement pendant le rendu. Ce n'est pas le comportement souhaité, car la fonction onClick ne doit être invoquée que lorsque le bouton est cliqué.

Pour résoudre ce problème, le code doit être modifié pour transmettre la référence de la fonction au lieu de l'appeler :

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

L'utilisation d'une fonction de flèche garantit que la fonction removeTaskFunction n'est pas invoquée immédiatement et attend à la place qu'un événement de clic de l'utilisateur s'exécute. Les fonctions fléchées ont été introduites dans ES6 et sont prises en charge dans React 0.13.3 ou version ultérieure.

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!