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