react-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是異步的，因此，當您在handleRangeSelected內部使用console.log時，狀態尚未更新。

如果要在更新后立即對其進行記錄，則可以在handleChange內將回調傳遞給setState ：

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);
  });
};

Answer 2

React setState是異步的，因此您將遇到此類問題，setState將回調作為其第二個參數，您可以在該回調中調用handleRangeSelected函數

您可以檢查https://codesandbox.io/s/011x911nyl我剛剛在回調中記錄了“狀態更新”，只需將其更改為調用handleRangeSelected

Answer 3

您在DatePickers中調用onChange和onSelect 。 它們都同時觸發，因此設置新狀態的一個被觸發，另一個使用舊狀態的值。 我將您的代碼更改為在handleRangeSelected的setState回調中handleChange

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