Почему reactjs setState возвращает предыдущее значение?

#javascript #reactjs

Мне нужно изменять state по клику. У меня есть такой код:

var Component = React.createClass({
   getInitialState : function() {
      return {value : 0}
   }
   changeState : function(event) {
      this.setState({value : event.target.id}) ;
   }
   render : function() {
      Change
   }
}) ;


Но изменение срабатывает только после первого клика, первый клик я получаю 0, второй
клик, я получаю 1.

Я перечитал доку где сказано не использовать setState напрямую, поэтому я использовал
replaceState, но и он по прежнему возвращает предыдущее значение. Как с этим бороться?
    

Ответы

Ответ 1

У setState есть довольно редко упоминаемый второй параметр, который является обычной
callback функцией. Вы можете отлавливать новое состояние компонента уже там this.setState({/*
new state */}, callback).

var Component = React.createClass({
   getInitialState : function() {
      return {value : 0}
   }
   changeState : function(event) {
      this.setState({value : event.target.id}, function() {
       /* Получаем измененное значение state */
       console.log(this.state.value);
      }) ;
   }
   render : function() {
      return Change
   }
}) ;


Либо формируем новый объект state, а только потом записываем его:

var Component = React.createClass({
   getInitialState : function() {
      return {value : 0}
   }
   changeState : function(event) {
      /* формируем новый state */
     let nextState = Object.assign({}, this.state, { value: event.target.id });

      /* получаем будущее значение state */
      console.log(nextState.value);

      /* записываем новый state */
      this.setState(newState);

   }
   render : function() {
      return Change
   }
}) ;


Недавно делал небольшой перевод про работу state. Возможно пригодится


Ответ 2

Судя по всему, вы столкнулись с тем, что значение this.state меняется не мгновенно
после вызова this.setState(). В тоже время, такое поведение является штатным (см. документацию):


  setState() does not immediately mutate this.state but creates a pending state transition.
Accessing this.state after calling this method can potentially return the existing value.


Есть у меня такое чувство, что вы неправильно используете состояние компонента. К
сожалению, без нормального описания исходной проблемы давать какие-то советы бессмысленно.