J'essaie de définir la valeur d'une des clés de l'état dans mon composant. L'État ressemble à ça:
this.state = {
stateValue1: false,
stateValue2: false,
stateValue3: false
};
Pour changer mon état j'utilise la fonction:
handleSwitch = type => {
this.setState((prevState, type) => ({
...prevState,
[type]: !prevState[type]
}));
};
En fonction de la clé de l'état que je souhaite modifier, je l'utilise comme:
handleSwitch("stateValue2")
Mais comme résultat je reçois
{
stateValue1: false,
stateValue2: false,
stateValue3: false
[object Object]: true
}
Cependant, lorsque j'utilise le nouvel objet comme argument de la fonction setState
, tout fonctionne bien. Pourquoi?
Code de travail:
handleNotificationSwitch = type => {
const newState = {
...this.state,
[type]: !this.state[type]
};
this.setState(newState);
};
Et son résultat:
{
stateValue1: false,
stateValue2: true,
stateValue3: false
}
3 réponses
Supprimez ou renommez le deuxième argument de la fonction que vous passez à setState
.
this.setState( prevState => ({
...prevState,
[type]: !prevState[type]
}));
Ou
this.setState( ( prevState, props ) => ({
...prevState,
[type]: !prevState[type]
}));
L'argument type
passé à handleSwitch
est la valeur que vous souhaitez - à l'intérieur setState
, type
est défini sur tout ce que React passe à cette fonction, qui est props
.
Le deuxième argument de la fonction de mise à jour est les accessoires actuels des composants, un objet. React setState Docs
Je soupçonne que vous voulez quelque chose de plus semblable au suivant, en supposant que type
est un accessoire:
handleSwitch = type => {
this.setState((prevState, props) => ({
...prevState,
[props.type]: !prevState[props.type]
}));
};
Ou, vous aviez l'intention d'utiliser le paramètre type
passé à handleSwitch
, auquel cas:
handleSwitch = type => {
this.setState((prevState, props) => ({
...prevState,
[type]: !prevState[type]
}));
};
Selon les docs, une fonction de mise à jour de setState
accepte deux paramètres, le deuxième est props
. Donc, en fait, vous définissez props
sur état.
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.