Pourquoi ma fonction React `onClick` se déclenche-t-elle pendant le rendu et comment l'empêcher ?

Déclencheurs de fonction React onClick lors du rendu : pourquoi et comment les empêcher

Dans les applications React, la création de composants personnalisés implique souvent la transmission de données et de fonctions aux composants enfants. Lorsque vous traitez une liste d'objets et une fonction de suppression, vous pouvez rencontrer un problème où la fonction onClick se déclenche pendant le rendu plutôt que lorsque vous cliquez dessus.

Exemple de code :

Considérez le code suivant :

const TaskList = React.createClass({
  render: function() {
    const tasks = this.props.todoTasks.map(todo => (
      <div>
        {todo.task}
        <button type="submit" onClick={this.props.removeTaskFunction(todo)}>
          Submit
        </button>
      </div>
    ));
    return (
      <div className="todo-task-list">{tasks}</div>
    );
  },
});

Explication du problème :

Le problème survient parce que notre code appelle this.props.removeTaskFunction(todo) au lieu de simplement transmettre le fonction à onClick. Cet invocation immédiate provoque l'exécution de la fonction pendant le rendu.

Solution :

Pour résoudre ce problème, nous pouvons utiliser une fonction flèche, comme le montre le code suivant :

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

Fonctions fléchées dans React :

Fonctions fléchées, désignées par () => {}, sont une syntaxe concise introduite dans ES6. Ils offrent plusieurs avantages pour le développement de React :

• Performances améliorées :En utilisant les fonctions fléchées, vous évitez les rendus involontaires causés par la liaison de contexte.
• Flexibilité : Les fonctions fléchées peuvent être transmises directement aux fonctions d'ordre supérieur en tant que rappels ou gestionnaires d'événements.
• Lisibilité améliorée : Les fonctions fléchées simplifient le code en éliminant le besoin de liaison explicite ( ).

Par conséquent, en convertissant le gestionnaire onClick en fonction de flèche, nous pouvons garantir que la fonction de suppression n'est exécutée que lorsque le bouton est cliqué, empêchant ainsi les exécutions involontaires 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!