Ant Design Calendar `onSelect` 没有按预期工作

Question

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

<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 日（当前默认日期）。同样，当用户选择 4 月 24 日时, 2021，console.log 给出 2021 年 4 月 23 日。

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

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

Ant Design Calendar `onSelect` 没有按预期工作

Ant Design Calendar `onSelect` doesn't work as expected

web

reactjs

antd