1
votes

Réagir en montrant l'état précédent

Ceci est mon code à l'intérieur d'un composant.

{strength: 0, dexterity: 0, intelligence: 0, health: 0}

Même si updateApp (...) a appelé après augmenterBasicAttrStrength (...), quand je console l'état qu'il montre comme ci-dessous.

/ p>

this.state = {
            strength: 0,
            dexterity: 0,
            intelligence: 0,
            health: 0
        };

        this.increaseBasicAttrStrength = this.increaseBasicAttrStrength.bind(this);
        this.updateApp = this.updateApp.bind(this);

    }

    increaseBasicAttrStrength(event) {
        this.setState(prevState => ({
            strength: prevState.strength + 10,
            dexterity: prevState.dexterity,
            intelligence: prevState.intelligence,
            health: prevState.health
        }));
        this.updateApp();
    }

    updateApp() {
        console.log(this.state);
        this.props.basicAttrsHandler(this.state);
    }

l'état n'a pas été mis à jour.

reactjs

1 commentaires

this.setState (prevState => ({... prevState, force: prevState.strength + 10}), this.updateApp)

4 Réponses :

3
votes

Je ne sais pas ce que fait updateApp , mais si vous devez l'appeler après votre appel setState , vous devez le placer à l'intérieur un rappel. SetState est asynchrone, il n'y a donc aucune garantie que ces mises à jour se sont produites avant l'appel de updateApp . L'utilisation d'un rappel garantit que le code à l'intérieur ne s'exécute pas tant que la mise à jour de l'état initial n'est pas terminée:

increaseBasicAttrStrength(event) {
        this.setState(prevState => ({
            strength: prevState.strength + 10,
            dexterity: prevState.dexterity,
            intelligence: prevState.intelligence,
            health: prevState.health
        }), () => this.updateApp())
    }

1 commentaires

ouais, parce que cela sera exécuté avant le recalcul du DOM

1
votes

setState est asynchrone. Vous pouvez utiliser la méthode de rappel pour obtenir l'état mis à jour.

increaseBasicAttrStrength(event) {
    this.setState(prevState => ({
        strength: prevState.strength + 10,
        dexterity: prevState.dexterity,
        intelligence: prevState.intelligence,
        health: prevState.health
    }, () => {console.log(this.state)}));

}

0 commentaires

1
votes

La raison en est que setState est supposé être asynchrone. Voir ceci

0 commentaires

1
votes

Peut-être que cela fonctionne, appelez la fonction de mise à jour après la mise à jour de l'état dans le rappel

    increaseBasicAttrStrength(event) {
        this.setState(prevState => ({
            strength: prevState.strength + 10,
            dexterity: prevState.dexterity,
            intelligence: prevState.intelligence,
            health: prevState.health
        }),()=>{
        this.updateApp(); //add this function in callback
       });

    }

0 commentaires