2
votes

L'état Reactjs ne se met pas à jour

  constructor(props) {

    super(props);
    this.state = {
      active: false,
      showSideBar: false,
      className: ""
    }
  }
  componentDidMount() {
    if (this.props.overlay) {
      this.setState({
        className: "wrapper_overlay"
      });
      alert(this.state.className);
    }
    else if (this.props.SideBarWithIcon) {
      this.setState({
        className: "wrapper_clopsed"
      });
    }
  }
I am updating my state with the help of the props but the component is getting props but state is not updating

javascript reactjs

1 commentaires

Vous pouvez abandonner le constructeur et écrire directement state = {}. Pour plus d'informations: hackernoon.com/…

5 Réponses :

4
votes

setState est asynchrone. Alertez simplement dans un rappel de la méthode à la place.

if (this.props.overlay) {
  this.setState(
    { className: "wrapper_overlay" },
    () => alert(this.state.className);
  );
}

Remarque: vous pouvez et devez également utiliser shouldComponentUpdate pour vérifier quand un setState code> l'appel est terminé

0 commentaires

3
votes

Étant donné que setstate est de nature asynchrone, il se peut que vous ne puissiez pas voir l'état mis à jour dans alerte. Vous pouvez l'utiliser dans le callback qui sera appelé une fois le setstate terminé. comme ceci

componentDidMount() {
    if (this.props.overlay) {
      this.setState({
        className: "wrapper_overlay"
      }, ()=> {alert(this.state.className);});
   }

0 commentaires

1
votes

Les mises à jour d'état peuvent être asynchrones a>

React peut regrouper plusieurs appels setState () en une seule mise à jour pour performances.

Étant donné que this.props et this.state peuvent être mis à jour de manière asynchrone, vous ne doit pas se fier à leurs valeurs pour calculer l'état suivant.

this.setState(() => ({
  className: "wrapper_overlay"
}));

Pour résoudre ce problème, utilisez une deuxième forme de setState () qui accepte une fonction plutôt qu'un objet.

// Correct
this.setState((state, props) => ({
  className: "wrapper_overlay"
}));

ou simplement

// Wrong
this.setState({
    className: "wrapper_overlay"
  });

0 commentaires

1
votes

Dans React.js, l'exécution du thread de programme n'attend pas la définition de l'état et continue son exécution, jusqu'à ce que et à moins que l'opération ne soit définie dans le rappel setState () .

Votre état est défini mais comme votre alert () est après setstate c'est-à-dire pas en rappel de setState () c'est pourquoi il obtient la valeur précédente car au moment où l'état définit une nouvelle valeur, le thread n'attend pas mais exécuter l'instruction suivante qui est alert () .

if (this.props.overlay) {
    this.setState({ className: "wrapper_overlay" }, () => alert(this.state.className););
}

J'espère que cela fonctionne pour vous.

0 commentaires

1
votes

Utilisez simplement la méthode de rappel pour mettre à jour l'état, comme setState () peut fonctionner de manière asynchrone.
        this.setState(() => {
            className: "wrapper_clopsed"
        });

0 commentaires