我在 React 中使用 useCallBack 收到無效的鈎子調用錯誤

Question

我在我的項目中遇到無效的鈎子調用錯誤。

 <DateBottomSheet
          key={keyIndexStartDate}
          currentDate={startDate}
          headerTitle={moment(startDate).format('MMMM YYYY')}
          backdropComponent={renderBackdrop}
          ref={sheetRefStartDate}
          snapPoints={snapPointsDateSheet}
          markedDates={markedStartDate}
          onChange={() => handleSheetChanges}
          renderArrow={renderCalendarRightAndLeftIcon}
          onPressArrowRight={()=>onPressCalendarRight(startDate, 'startDate')}
          onPressArrowLeft={()=>onPressCalendarLeft(startDate, 'startDate')}
          onDayPress={day => {
            setMarkedStartDateValue(day.dateString);
            pressOpenStartTimerAction();
            // handleSnapPress(1, CreateWorkyBS.startTime);
          }}
          onPressCancel={() =>
            handleCloseStartCalender(CreateWorkyBS.startDate)
          }
          onPressSave={() => saveStartDateItem()}
          saveButtonDisable={buttonStartDateDisable}></DateBottomSheet>

並且是我的 OnpressCalendar function

const onPressCalendarRight = (date, type) => 
useCallback(add => {
  const addDate = moment(date).add(1, 'M');
  type == 'startDate' ? setStartDate(addDate) : setEndDate(addDate);
  add();
});

錯誤截圖

有人幫我嗎？

Answer 1

你違反了鈎子規則。 useCallback是一個鈎子，因此只能在功能組件的根級別調用。

看起來您可以簡單地完全刪除useCallback的使用來解決問題，並直接在onPressCalendarRight 。

const onPressCalendarRight = (date, type) => {
  const addDate = moment(date).add(1, 'M');
  type == 'startDate' ? setStartDate(addDate) : setEndDate(addDate);
}

Answer 2

嘗試這個

 onPressCalendarRight = useCallback((add) => (date,type) => {
 const addDate = moment(date).add(1, 'M');
  type == 'startDate' ? setStartDate(addDate) : setEndDate(addDate);
  add();
 },[]);