Airbnb/反应日期设置在 API 获取后的几天内被阻止

Question

Library： https://github.com/airbnb/react-dates

问：是否可以设置从服务器获取后的阻止天数？（等待/召回是日阻止回调或重新初始化日历）

问题：当数据尚未准备就绪时，在日历视图更改为下个月后，将调用回调"isDayBlocked"。

示例代码：

import { DayPickerSingleDateController } from 'react-dates';
class DayPicker {
  isDayBlocked(day) {
    return this.days.has(day);
  }
  handleMonthChange() {
    // async api fetch
    this.days = getNextMonthBlockedDays();
  }
  render() { 
    <DayPickerSingleDateController
      {...someProps}
      isOutsideRange={this.isOutsideRange}
      onNextMonthClick={this.handleMonthChange}
    />
  }
}

我尝试过：

• 根据加载道具挂载/卸载日历（问题 - 动画到下个月之前下一个挂载回调+当日历消失时看起来很糟糕）

• 加载以存储下个月数据，因此当我将视图更改为下个月时，"isDayBlocked"效果很好，并且可以获取下个月的数据（问题 - 双击下个月更改或连接速度慢）

有什么想法吗？

Answer 1

将数据保持在状态可以解决您的问题并每次更新您的视图。

  handleMonthChange() {
    // async api fetch
    getNextMonthBlockedDays().then((data) => {
        this.setState({days : data});
    });
  }

您还可以设置一个标志，以便在处理请求时无法更改月份，或者您可以取消上一个请求。（如果您的抓取 API 实现了取消）。

Answer 2

我在加载过程中添加了带有微调器的绝对叠加div。