Essayez de mettre à jour un état de tableau en utilisant la carte de es6, vous avez un problème. Quel est le problème avec ce code?

this.setState({
  drinks: this.state.drinks.map(o => {
    if (o === this.state.newDrink) {
      return this.state.newDrink;
    }
    return o;
  })
});

Où les boissons sont un tableau. Ma fonctionnalité d'ajout est correcte mais pas pour la mise à jour, je pense que quelque chose ne va pas ci-dessus?

Ma démo https://codesandbox.io/s/nk6qo8krvm

0
Sharon Chai 13 avril 2018 à 11:17

3 réponses

Meilleure réponse

Vous comparez votre nouvelle boisson avec l'ancienne boisson.

Par exemple, si vous modifiez coffee et faites en sorte que coffeef vous comparez dans la fonction de carte coffee avec coffeef. Cela ne changerait donc rien.

Vous devez sécuriser une référence de l'ancienne valeur afin de pouvoir la comparer avec cela.

state = {
    drinks: ["coffee", "milo", "plain water"],
    modalIsOpen: false,
    newDrink: "",
    oldDrink: "" // <-- added
};

handleOpenModal = (isEdit, existingDrink) =>
    this.setState({
        modalIsOpen: true,
        newDrink: existingDrink,
        oldDrink: existingDrink, // <-- added
        isEdit
    });

this.setState({
    drinks: this.state.drinks.map(o => {
        console.log(o)
        console.log(this.state.newDrink)
        if (o === this.state.oldDrink) { // <-- changed
            return this.state.newDrink;
        }
        return o;
    }),
    modalIsOpen: false,
    newDrink: ""
});

Exemple pratique: https://codesandbox.io/s/5k2y2l341k

Avertissement

Parce que vous comparez les noms des boissons. Si vous avez 2 boissons du même nom, les deux valeurs seront modifiées lorsque vous en changerez une.

Modifier

Comme l'a souligné @Tho Vu. Vous pouvez utiliser l'index au lieu du nom pour comparer. C'est une solution bien meilleure et elle résout le problème ci-dessus.

https://codesandbox.io/s/w76978l6mw

0
Ron Nabuurs 13 avril 2018 à 09:47

Le problème est essentiellement votre comparaison sur la carte. Essayez de consigner votre fonction de carte sur console et vous pouvez voir que le tableau ne change jamais.

L'instruction if vérifie s'il existe des valeurs existantes dans la liste qui sont égales à la valeur newDrink, s'il y a retourne la valeur newDrink.

De toute évidence, votre liste ne sera jamais mise à jour, car la valeur newDrink est différente des valeurs existantes.

Il y a beaucoup d'autres problèmes avec votre code, mais j'ai résolu votre problème dans votre extrait de code existant: https://codesandbox.io/s/10qpxx2nwj

Cette solution est légèrement plus rapide que le mappage sur la liste entière, car maintenant le code analyse l'index de la valeur que vous souhaitez modifier et met simplement à jour la valeur dans la liste si vous êtes en "mode édition".

0
Nift 13 avril 2018 à 08:33

Essayez cette solution, cela peut vous aider.

const drinks = this.state.drinks
drinks.map((data) => {
  if (data === this.state.newDrink){
    this.setState({drinks: this.state.newDrink})
  } else {
    this.setState({drinks: data})
  }
})
0
Thananjaya S 13 avril 2018 à 08:24