setState ne met pas l'état à jour immédiatement

Question

Je voudrais demander pourquoi mon état ne change pas quand je fais un onClick événement. J'ai cherché il y a un moment que je dois lier l'évènement onClick dans le constructeur mais l'état n'est toujours pas mis à jour.

Voici mon code :

import React from 'react';
import Grid from 'react-bootstrap/lib/Grid';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import BoardAddModal from 'components/board/BoardAddModal.jsx';    
import style from 'styles/boarditem.css';

class BoardAdd extends React.Component {
    constructor(props) {
        super(props);    
        this.state = {
            boardAddModalShow: false
        };    
        this.openAddBoardModal = this.openAddBoardModal.bind(this);
    }

    openAddBoardModal() {
        this.setState({ boardAddModalShow: true }); // set boardAddModalShow to true

        /* After setting a new state it still returns a false value */
        console.log(this.state.boardAddModalShow);   
    }

    render() {    
        return (
            <Col lg={3}>
                <a href="javascript:;" 
                   className={style.boardItemAdd} 
                   onClick={this.openAddBoardModal}>
                    <div className={[style.boardItemContainer,
                                     style.boardItemGray].join(' ')}>
                        Create New Board
                    </div>
                </a>
            </Col>
        );
    }
}

export default BoardAdd

Answer 1

Votre état a besoin d'un certain temps pour muter, et comme console.log(this.state.boardAddModalShow) s'exécute avant que l'état ne mute, vous obtenez la valeur précédente en sortie. Vous devez donc écrire la console dans le callback de la fonction setState fonction

openAddBoardModal() {
  this.setState({ boardAddModalShow: true }, function () {
    console.log(this.state.boardAddModalShow);
  });
}

setState est asynchrone. Cela signifie que vous ne pouvez pas l'appeler sur une ligne et supposer que l'état a changé sur la suivante.

Según Documents sur React

setState() ne mute pas immédiatement this.state mais crée une transition d'état en attente. Accès à this.state après avoir appelé cette peut potentiellement retourner la valeur existante. Il n'y a pas de garantie de fonctionnement synchrone des appels à setState et les appels peuvent et les appels peuvent être groupés pour gagner en performance.

Pourquoi feraient-ils setState asynchrone

Cela s'explique par le fait que setState modifie l'état et provoque un nouveau rendu. Ce peut être une opération coûteuse et la rendre synchrone pourrait laisser le navigateur ne répond plus.

Ainsi, le setState Les appels sont asynchrones et mis en lots pour améliorer l'interface utilisateur. l'expérience utilisateur et les performances.

Answer 2

Heureusement, setState() prend un callback. Et c'est là que nous obtenons l'état mis à jour.

Prenons cet exemple.

this.setState({ name: "myname" }, () => {                              
        //callback
        console.log(this.state.name) // myname
      });

Ainsi, lorsque le rappel se déclenche, this.state est l'état mis à jour.
Vous pouvez obtenir mutated/updated données dans le rappel.

Answer 3

Puisque setSatate est une fonction asynchrone, vous devez consigner l'état en tant que callback comme ceci.

openAddBoardModal(){
    this.setState({ boardAddModalShow: true }, () => {
        console.log(this.state.boardAddModalShow)
    });
}

Answer 4

setState() ne met pas toujours immédiatement à jour le composant. Elle peut être mise en attente ou reporter la mise à jour à plus tard. Cela rend la lecture de this.state juste après l'appel à setState() un piège potentiel. Utilisez plutôt componentDidUpdate ou un setState callback ( setState(updater, callback) ), dont le déclenchement est garanti après l'application de la mise à jour. Si vous devez définir l'état en fonction de l'état précédent, lisez l'argument updater ci-dessous.

setState() conduira toujours à un nouveau rendu, sauf si shouldComponentUpdate() renvoie un faux. Si des objets mutables sont utilisés et que la logique de rendu conditionnel ne peut pas être mise en œuvre dans le cadre de l'option shouldComponentUpdate() en appelant setState() uniquement lorsque le nouvel état diffère de l'état précédent, ce qui évitera les réexpositions inutiles.

Le premier argument est une fonction de mise à jour avec la signature :

(state, props) => stateChange

state est une référence à l'état du composant au moment où la modification est appliquée. Il ne doit pas être directement modifié. Au lieu de cela, les changements doivent être représentés par la construction d'un nouvel objet basé sur l'entrée de l'état et des props. Par exemple, supposons que nous voulions incrémenter une valeur dans state par props.step :

this.setState((state, props) => {
    return {counter: state.counter + props.step};
});

Answer 5

Si vous voulez savoir si l'état est mis à jour ou non, une autre façon de procéder est la suivante

_stateUpdated(){
  console.log(this.state. boardAddModalShow);
}

openAddBoardModal(){
  this.setState(
    {boardAddModalShow: true}, 
    this._stateUpdated.bind(this)
  );
}

De cette façon, vous pouvez appeler la méthode "_stateUpdated" chaque fois que vous essayez de mettre à jour l'état pour le débogage.