Ant Design Calendar `onSelect` 无法按预期工作答案

【问题标题】：Ant Design Calendar `onSelect` doesn't work as expectedAnt Design Calendar `onSelect` 无法按预期工作
【发布时间】：2021-04-22 12:17:15
【问题描述】：

我的 React 项目中有一个 Ant Design 日历组件 -

<Calendar
     value={this.state.value}
     fullscreen={false}
     onPanelChange={this._onPanelChange}
     onSelect={this._onSelect}
     disabledDate={(current) => {
     return current && moment().isAfter(current, "day");
     }}
/>

我有以下状态-

this.state = {
   value: moment(),
   scheduleDate: moment(),
}

_onSelect 函数看起来像 -

 _onSelect = (value) => {
    this.setState({
      value,
      scheduleDate: value,
    });
    this.props.setScheduleDate(this.state.scheduleDate.toDate());
    console.log(this.state.scheduleDate);
  };

当用户选择一个日期（例如，2021 年 4 月 23 日）时，console.log 给我的日期是 2021 年 4 月 22 日（当前默认日期）。同样，当用户选择 2021 年 4 月 24 日时， console.log 表示 2021 年 4 月 23 日。

它总是将scheduleDate 设置为上一步中选择的内容。知道出了什么问题，我该如何解决？提前致谢。

【问题讨论】：

标签： reactjs web antd

【解决方案1】：

您的代码中的问题在于this.props.setScheduleDate(this.state.scheduleDate.toDate())，因为setState 是异步的。这意味着state 不会在我们调用setState 后立即更新。因此，您在console 或this.props.setScheduleDate 中看到的值是之前的状态值。

现在，有两种方法可以解决此问题

使用setState 的callback 方法，它是setState() 的第二个参数，是一个可选的回调函数，一旦setState 完成就会执行

_onSelect = (value) => {
  this.setState({
    value,
    scheduleDate: value,
  }, () => {
    this.props.setScheduleDate(this.state.scheduleDate.toDate());
    console.log(this.state.scheduleDate);
  });
};

在调用this.props.setScheduleDate 时使用_onSelect 函数的参数

_onSelect = (value) => {
  this.setState({
    value,
    scheduleDate: value,
  });
  this.props.setScheduleDate(value.toDate());
};

【讨论】：