response-datepicker диапазон выбора объекта при выборе дескриптора

Question

Я использую react-datepicker для создания моего приложения.

Следуйте моему исходному коду здесь: https://codesandbox.io/s/xr76olj70o

Я хочу получить объект с startDate а также endDate когда я выбираю указанный день, как это: {startDate: "24-07-2018", endDate: "31-07-2018"}

мой handleSelected функционировать так:

  handleRangeSelected = () => {
    const { startDate, endDate } = this.state;
    const range = {
      startDate: moment(startDate).format("DD-MM-YYYY"),
      endDate: moment(endDate).format("DD-MM-YYYY"),
    }
    console.log('Range selected!', range);
  }

Моя проблема, когда я выбираю день. В первый раз, state Кажется, обновление не сразу, когда я выбираю день.

Результаты:

First time: I chose 31/07/2018, it logs result:
Range selected! {startDate: "24-07-2018", endDate: "24-07-2018"}


Second time: I chose 01/08/2018, it logs result:
Range selected! {startDate: "24-07-2018", endDate: "31-07-2018"}

Что я здесь не так? Нужна ваша помощь! Благодарю.

Answer 1

Реакция setState является асинхронной, в результате чего вы столкнетесь с такими проблемами, setState принимает обратный вызов в качестве второго аргумента, вы можете вызвать функцию handleRangeSelected в этом обратном вызове.

Вы можете проверить https://codesandbox.io/s/011x911nyl Я только что зарегистрировал "состояние обновлено" в обратном вызове, просто измените его на вызов handleRangeSelected

Answer 2

Ты звонишь onChange а также onSelect в ваших DatePickers. оба они стреляют одновременно, поэтому тот, кто устанавливает новое состояние, увольняется, а другой использует значения старых состояний. Я изменил твой код, чтобы позвонить handleRangeSelected в обратном вызове setState в handleChange

this.setState({ startDate, endDate }, this.handleRangeSelected);

Answer 3

Ваше состояние, кажется, корректно обновляется, но имейте в виду, что setState асинхронный, поэтому, когда вы console.log внутри вашего handleRangeSelectedсостояние еще не обновлено.

Если вы хотите войти в него, как только он обновится, вы можете передать обратный вызов вашему setState внутри handleChange:

handleChange = ({ startDate, endDate }) => {
  startDate = startDate || this.state.startDate;
  endDate = endDate || this.state.endDate;
  if (startDate.isAfter(endDate)) {
    endDate = startDate;
  }
  // Pass callback to log selected range
  this.setState({ startDate, endDate }, () => {
    const range = {
      startDate: moment(this.state.startDate).format("DD-MM-YYYY"),
      endDate: moment(this.state.endDate).format("DD-MM-YYYY")
    };
    console.log("Range selected!", range);
  });
};