Почему setState в моей функции handleClick обновляет состояние компонента на один шаг позже? - PullRequest
Новая
       6

Почему setState в моей функции handleClick обновляет состояние компонента на один шаг позже?

0 голосов
/ 14 февраля 2020

У меня есть функция handleClick, прикрепленная к дню в моем календаре: 

// Handles auto fill in dates for check-in and checkout
  handleClick(month, day, yr) {
    let newClicks = this.state.clicks + 1;
    let realMonthNum = month + 1;

    this.setState({ clicks: newClicks });

    if (newClicks % 2 !== 0) {
      this.setState({ selectedStartMonth: realMonthNum });
      this.setState({ selectedStartDay: day });
      this.setState({ selectedStartYr: yr });
      this.resetEndDate();
    } else {
      this.setState({ selectedEndMonth: realMonthNum });
      this.setState({ selectedEndDay: day });
      this.setState({ selectedEndYr: yr });
    }
  }

По сути, она должна обновлять срезы начальной даты моего состояния при первом клике, а затем срезы конечной даты моего состояния на втором клике. Это работает, однако, когда я смотрю на свое состояние в консоли, я заметил, что начальный и конечный срезы моего состояния обновляются на один шаг позже. Например, по первому клику мое состояние - это начальные значения. После того, как я выполню второй щелчок, в моем состоянии обновятся selectedStartMonth, selectedStartDay и selectedStartYr. И только после третьего щелчка обновляются selectedEndMonth, selectedEndDay и selectedEndYr. Почему setStates задерживается?

Вот как выглядит мое onClick событие: 

<div className="number-days">
  {this.state.days.map(day => <div className="number" onClick={() => 
    this.props.handleClick(currentMonth, day, yr)}>{day}</div>)}
</div>

А вот как выглядит начальное состояние: 

this.state= {
      currentDay: currentDate.getDate(),
      currentMonth: currentDate.getMonth(),
      nextMonth: (currentDate.getMonth() + 1) % monthsLength,
      currentYr: currentDate.getFullYear(),
      selectedStartMonth: '',
      selectedStartDay: '',
      selectedStartYr: '',
      selectedEndMonth: '',
      selectedEndDay: '',
      selectedEndYr: '',
      clicks: 0
    }

И при необходимости вот что выводит консольный журнал при первом и втором щелчке:

enter image description here

Ответы [ 2 ]

0 голосов
/ 14 февраля 2020

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

setState ({.....}, () => {, что вам нужно сделать после setState })

0 голосов
/ 14 февраля 2020

Может иметь какое-то отношение к этому (из реакции документы ):

setState () не немедленно изменяет this.state, но создает переход состояния ожидания. Доступ к this.state после вызова этого метода потенциально может вернуть существующее значение.

Нет гарантии синхронной работы вызовов setState, и вызовы могут быть сгруппированы для увеличения производительности.

В какой момент в вашем коде вы регистрируете состояние на консоли?

...