La différence entre la définition d'un nouvel état et la modification de l'ancien état à l'aide de setState

Question

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
    }

javascript reactjs react-native ecmascript-6

1

yqbk 13 avril 2018 à 15:48

Answer 1

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.

1

Ben West 13 avril 2018 à 12:53

Answer 2

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]
    }));

};

1

Dave Meehan 13 avril 2018 à 12:55

Answer 3

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.

3

Denys Kotsur 13 avril 2018 à 12:53

La différence entre la définition d'un nouvel état et la modification de l'ancien état à l'aide de setState

3 réponses

Questions connexes

De nouvelles questions

javascript