J'ai un tableau de booléens comme état dans mon composant. S'il est faux, je veux le définir comme vrai.

this.state = {
       checkedPos: []
}

handleChange(index, reaction) {
   if (!this.state.checkedPos[index])
   {
      this.state.checkedPos[index] = true;
      this.addReaction(reaction);
      this.forceUpdate();
   }
}

Cela fonctionne, mais le seul problème que je rencontre est qu'il affiche cet avertissement :

Ne modifiez pas directement l'état. Utilisez setState ()

J'ai donc essayé de le changer et de le mettre comme ceci:

this.setState({
 checkedPos[index]: true
})

Mais il ne compile pas du tout.

0
josemartindev 10 mars 2019 à 19:03

2 réponses

Meilleure réponse

Une solution serait de map le tableau précédent dans votre état. Puisque vous ne devriez jamais modifier votre état sans setState je vais vous montrer comment vous pouvez l'utiliser dans cette solution :

handleChange(index) {
    this.setState(prev => ({
        checkedPos: prev.checkedPos.map((val, i) => !val && i === index ? true : val)
    }))
}

Ici, map changera la valeur de vos éléments de tableau en true uniquement si la valeur précédente était false et si l'index est le même que celui fourni. Sinon, il renvoie la valeur déjà existante.

Vous pouvez ensuite utiliser le deuxième argument de setState pour exécuter votre fonction après la mise à jour de votre valeur :

handleChange(index) {
    this.setState(prev => ({
        checkedPos: prev.checkedPos.map((val, i) => !val && i === index ? true : val)
    }), () => {
        this.addReaction(reaction);
    })
}
2
Treycos 10 mars 2019 à 16:29

Vous pouvez utiliser le setState fonctionnel pour cela.

this.setstate((prevState) => ({
    const checkedPos = [...prevState.checkedPos];
    checkedPos[index] = true
    return { checkedPos };
}))
1
Utsav Patel 10 mars 2019 à 16:24