如何从异步等待函数返回布尔值而不是 Promise<boolean> (Typescript

【问题标题】：How to return boolean from async await function instead of Promise<boolean> (Typescript | React)如何从异步等待函数返回布尔值而不是 Promise<boolean> (Typescript | React)
【发布时间】：2020-11-02 17:05:15
【问题描述】：

所以我在 React.js 中工作，并且我有一个来自 AntDesign 的日历组件，其中包含一个 disabledDate 属性。

这个 disabledDate 属性接收一个布尔值作为响应，它会检查日历组件中的每个日期。

问题是我的客户给了我一个 API，如果它找到一些数据（这意味着 Date 可用于调度），它会向我发送一个 200 响应，如果它没有，它会发送一个 404 响应

所以我正在做的是我创建了一个函数来检查给定日期是否可用，并根据此函数的结果，disabledDate 属性将启用或禁用日历组件中的日期。

现在的问题是 disabledDate 无法接收 Promise，它需要一个布尔值，当我将其变为异步时，它显然会返回一个 Promise 而不是布尔值。

是否有任何解决方法或我完全错过了这一点

这是我的功能

export const isDateAvailable = async (
  specialistID: number | undefined,
  serviceID: number | undefined,
  date: moment.Moment
) => {
  const body = {
    especialista_id: specialistID,
    servicio_id: serviceID,
    fecha: date.format("YYYY-MM-DD"),
  };

  const response = await axios.get(API_URL + "/disponibilidadAtencion", {
    params: body,
  });

  if (response.status === 404) {
    return false;
  }

  return true;
};

这是我的日历组件

<Calendar
    fullscreen={false}
    mode={"month"}
    disabledDate={async (current) => {
      if (current.fromNow() === "a few seconds ago") return false;
      const dateAvailability = await isDateAvailable(
        selectedSpecialist?.especialista_id,
        selectedService?.servicio_id,
        current
      );
      console.log(dateAvailability);
      return current < moment() || !dateAvailability;
    }}
  />

【问题讨论】：

你总会得到真实的，你需要使用 async await 或 thenables..
是的，这就是我要解决的问题，因为我无法将 disabledDate 转为异步
函数，如所写，将始终返回 true，它已经返回一个布尔值。您是否想要/试图返回获取请求的值？
应该设置状态，因为isDateAvailable() 是异步的。将您的状态参数传递给<Calendar>
无论哪种方式，使用 fetch，您都需要等待 axios 承诺解决。需要致电isDateAvailable 的驱动力是什么？它是为了响应某些交互/事件吗？您应该将结果保存在状态中，并在数据准备就绪且可用时呈现日历。

标签： javascript reactjs typescript async-await

【解决方案1】：

理想的方法是使用状态变量来保存isDateAvailabe() 响应并在Calendar 组件中使用状态变量。

您需要决定的另一件事是，当您执行 isDateAvailable() 函数时，组件应该如何表现。它可以隐藏或处于禁用状态，具体取决于您的用例。

以下代码示例供您参考，它在获取 api 调用时禁用日历组件。

export default CalendarWrapper = () => {
  const [isDisabled, setDisabled] = useState(false)
  
  useEffect(() => {
   isDateAvailable(
        selectedSpecialist?.especialista_id,
        selectedService?.servicio_id,
        current
    ).then (dateAvailability => {
      setDisabled(current < moment() || !dateAvailability)
    });
  }, [])

  return (
  <>
    <Calendar
    fullscreen={false}
    mode={"month"}
    disabledDate={isDisabled}
    />
  </>
)
}

【讨论】：