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.