0

我习惯于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"}

我在这里做错了什么？需要你的帮助！谢谢。

4

3 回答 3

0

您的状态似乎正在正确更新，但请记住这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);
  });
};
于 2018-07-24T04:35:20.270 回答
0

React setState 是异步的，因此你会遇到这样的问题，setState 将回调作为它的第二个参数，你可以在该回调中调用 handleRangeSelected 函数

您可以检查https://codesandbox.io/s/011x911nyl我刚刚在回调中记录了“状态更新”，只需将其更改为调用 handleRangeSelected

于 2018-07-24T04:35:32.893 回答
0

编辑 6zkxr91njw

您正在调用onChange并onSelect在您的 DatePickers 中。它们同时触发，因此设置新状态的一方被触发，另一方使用旧状态值。我将您的代码更改为handleRangeSelected在 setState 回调中调用handleChange

this.setState({ startDate, endDate }, this.handleRangeSelected);
于 2018-07-24T04:50:18.260 回答