4

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

var Component = React.createClass({
   getInitialState : function() {
      return {value : 0}
   }
   changeState : function(event) {
      this.setState({value : event.target.id}) ;
   }
   render : function() {
      <a id="1" onClick={this.changeState}>Change</a>
   }
}) ;

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

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

3
  • А как вы проверяете состояние компонента? 9 ноя 2015 в 13:47
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 10 ноя 2015 в 10:45
  • 1
    Этот код вообще не работает, т. к. нет return. И предлагаю добавить в вопрос работоспособный сниппет. И ещё, не видел в доке рекомендацию не использовать setState - точно не путаешь с рекомендацией не использовать state для записи?
    – Qwertiy
    27 апр 2016 в 18:42

2 ответа 2

3

У 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 <a id="1" onClick={this.changeState}>Change</a>
   }
}) ;

Либо формируем новый объект 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 <a id="1" onClick={this.changeState}>Change</a>
   }
}) ;

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

2
  • Можно было бы и провести небольшую выдержку из статьи.
    – AivanF.
    27 апр 2016 в 19:02
  • С удовольствием :-)
    – Anton K.
    27 апр 2016 в 19:41
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.

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.