如何從異步等待函數而不是 Promise 返回布爾值<boolean> （打字稿 | 反應）

Question

所以我在 React.js 工作，我有一個來自 AntDesign 的日歷組件，其中包括一個 disabledDate 道具。

這個 disabledDate 屬性接收一個布爾值作為響應，它檢查日歷組件中的每個日期。

問題是我的客戶給了我一個 API，如果它找到一些數據（這意味着日期可用於調度）和 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; }} />

Answer 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}
    />
  </>
)
}