J'ai créé une liste de tâches à l'aide de React, tout fonctionne bien jusqu'à ce que j'essaie d'implémenter une fonction de suppression.

Chaque fois que j'essaie de supprimer un élément, React supprimera tout le reste sauf cet élément. J'ai vérifié mon code et je n'ai pas pu déterminer quelle pourrait être la cause. Le journal de la console renvoie l'objet correct lorsqu'un élément est cliqué. J'ai le sentiment que cela pourrait être lié au fait que la valeur de la clé n'est pas unique ou à la façon dont mon code est pris en compte. Pour mieux illustrer le problème que j'ai rencontré, j'ai créé un codepen.

Edit 6130nmwlmk

0
York Wang 13 avril 2018 à 22:10

4 réponses

Meilleure réponse

splice() fait en fait deux choses, en pratique, cela a en quelque sorte un effet secondaire et un retour. Vous vous attendiez à ce que le tableau d'origine renvoie (naturellement), mais splice () renvoie en fait le tableau des éléments coupés du tableau initial (mdn). Par conséquent, la variable tasks était définie sur un tableau d'éléments de liste de tâches coupés de l'état initial des éléments de liste de tâches.

Ce que vous voulez, c'est essentiellement juste l'effet secondaire. Vous pouvez voir un CodeSandbox mis à jour ici, mais tout ce que j'ai fait a été de créer une copie de l'état actuel, puis utilisez splice () sur cette copie - à ce stade, nous utilisons uniquement l'aspect effet secondaire de splice ().

const tasks = this.state.tasks.slice(); // copy of current todo list
tasks.splice(index, 1); // "splice" out the list item we want to delete, but don't return a new list

this.setState({ tasks });
4
Sam 13 avril 2018 à 19:25

En effet, votre deleteHandler dans le composant Todo utilise .splice ... qui renvoie l'élément supprimé.

Votre code:

  deleteHandler = index => {
    const tasks = this.state.tasks.splice(index, 1);
    this.setState({
      tasks
    });
  };

Vous voulez faire quelque chose comme dans ce codepen.

  deleteHandler = index => {
    const newTasks = this.state.tasks.filter((task, tIndex) => {
      return index !== tIndex;
    });
    this.setState({
      tasks: newTasks
    });
  };
4
user 13 avril 2018 à 19:25

Pour l'instant, votre fonction de suppression fonctionne comme prévu: renvoyez le fichier state.tasks mis à jour qui contient un élément sur lequel vous avez cliqué. Utilisez-le à la place:

deleteHandler = index => {
    this.setState({
      tasks: this.state.tasks.filter((task) => task.value !== index)
    });
  };

Cela fonctionne correctement.

1
IP_ 13 avril 2018 à 19:44

Remplacez votre fonction de gestionnaire supprimée par ceci.

deleteHandler = index => {
   const tasks = this.state.tasks.slice();
   tasks.splice(index, 1);
   this.setState({
      tasks
   });
};

C'est une meilleure approche lorsque vous définissez / réinitialisez / modifiez l'état, vous devez créer une copie de l'état en utilisant la méthode slice, puis supprimer de la liste copiée puis setState.

1
Ikram - Ud - Daula 13 avril 2018 à 19:45