Pourquoi l'appel de la méthode react setState ne mute pas l'état immédiatement?

Je lis la section Formulaires dereactjsdocumentation et vient d'essayer ce code pour démontrer l' onChangeutilisation ( JSBIN ).

var React= require('react');

var ControlledForm= React.createClass({
    getInitialState: function() {
        return {
            value: "initial value"
        };
    },

    handleChange: function(event) {
        console.log(this.state.value);
        this.setState({value: event.target.value});
        console.log(this.state.value);

    },

    render: function() {
        return (
            <input type="text" value={this.state.value} onChange={this.handleChange}/>
        );
    }
});

React.render(
    <ControlledForm/>,
  document.getElementById('mount')
);

Lorsque je mets à jour la <input/>valeur dans le navigateur, la seconde console.logà l'intérieur du handleChangerappel imprime la même chose valueque la première console.log, pourquoi je ne vois pas le résultat de this.setState({value: event.target.value})dans la portée du handleChangerappel?

De la documentation de React :

setState()ne mute pas immédiatement this.statemais crée une transition d'état en attente. Accéder this.stateaprès avoir appelé cette méthode peut potentiellement renvoyer la valeur existante. Il n'y a aucune garantie de fonctionnement synchrone des appels vers setStateet les appels peuvent être groupés pour des gains de performances.

Si vous souhaitez qu'une fonction soit exécutée après le changement d'état, transmettez-la en tant que rappel.

this.setState({value: event.target.value}, function () {
    console.log(this.state.value);
});

Comme mentionné dans la documentation React, il n'y a aucune garantie d' setStateêtre déclenché de façon synchrone, vous console.logpouvez donc retourner l'état avant sa mise à jour.

Michael Parker mentionne avoir passé un rappel au sein du setState. Une autre façon de gérer la logique après un changement d'état est via la componentDidUpdateméthode du cycle de vie, qui est la méthode recommandée dans les documents React.

Généralement, nous recommandons d'utiliser à la place componentDidUpdate () pour une telle logique.

Ceci est particulièrement utile lorsqu'il peut y avoir des setStatedéclenchements successifs et que vous souhaitez déclencher la même fonction après chaque changement d'état. Plutôt que d'ajouter un rappel à chacun setState, vous pouvez placer la fonction à l'intérieur du componentDidUpdate, avec une logique spécifique à l'intérieur si nécessaire.

// example
componentDidUpdate(prevProps, prevState) {
  if (this.state.value > prevState.value) {
    this.foo();  
  }
}

Vous pouvez essayer d'utiliser ES7 async / wait. Par exemple, en utilisant votre exemple:

handleChange: async function(event) {
    console.log(this.state.value);
    await this.setState({value: event.target.value});
    console.log(this.state.value);
}

Méfiez-vous des méthodes de cycle de vie de réagir！

• http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
• https://reactjs.org/docs/react-component.html

J'ai travaillé plusieurs heures pour savoir qui getDerivedStateFromPropssera appelé après chaque setState().

😂

async-await la syntaxe fonctionne parfaitement pour quelque chose comme ce qui suit ...

changeStateFunction = () => {
  // Some Worker..

  this.setState((prevState) => ({
  year: funcHandleYear(),
  month: funcHandleMonth()
}));

goNextMonth = async () => {
  await this.changeStateFunction();
  const history = createBrowserHistory();
  history.push(`/calendar?year=${this.state.year}&month=${this.state.month}`);
}

goPrevMonth = async () => {
  await this.changeStateFunction();
  const history = createBrowserHistory();
  history.push(`/calendar?year=${this.state.year}&month=${this.state.month}`);
}

En termes simples, this.setState ({data: value}) est de nature asynchrone, ce qui signifie qu'il quitte la pile d'appels et ne revient à la pile d'appels que s'il est résolu.

Veuillez lire la boucle d'événements pour avoir une image claire de la nature asynchrone dans JS et pourquoi la mise à jour prend du temps -

https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4

Par conséquent -

    this.setState({data:value});
    console.log(this.state.data); // will give undefined or unupdated value

car il faut du temps pour mettre à jour. Pour réaliser le processus ci-dessus -

    this.setState({data:value},function () {
     console.log(this.state.data);
    });