获取类型错误：`month` 必须是移动 Airbnb/react-dates 中的有效时刻对象

如何解决获取类型错误：`month` 必须是移动 Airbnb/react-dates 中的有效时刻对象

我在桌面和移动设备上使用 react-dates DayPickerRangeController 但在移动设备中我收到此错误 - TypeError : month must be a valid moment object

下面是我的代码 -

/* eslint-disable @typescript-eslint/no-explicit-any */
import React,{ ReactElement,useContext,useState } from "react";
import { DayPickerRangeController,FocusedInputShape } from "react-dates";
import { makeStyles } from "@material-ui/core/styles";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import moment,{ Moment } from "moment";
import { useTheme } from "@material-ui/core/styles";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import KeyboardArrowLeftIcon from "@material-ui/icons/KeyboardArrowLeft";
import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
import IconButton from "@material-ui/core/IconButton";
import {
  BookingFlowStateContext,BookingFlowUpdaterContext,} from "../../context/BookingFlowContext";

const useStyles = makeStyles(() => ({
  wrapper: {
    height: "500px",},nextArrow: {
    right: "10px",top: "12px",position: "absolute",prevArrow: {
    left: "10px",}));

const DaySelector = (props: {
  packageStartDate: string;
  packageEndDate: string;
}): ReactElement => {
  const classes = useStyles();
  const { packageStartDate,packageEndDate } = props;
  const bookingDetails = useContext(BookingFlowStateContext);
  const setDetails = useContext(BookingFlowUpdaterContext);
  const [startDate,setStartDate] = useState<Moment | null>(
    bookingDetails.travelStartDate
  );
  const [endDate,setEndDate] = useState<Moment | null>(
    bookingDetails.travelEndDate
  );
  const [focusedInput,setFocusedInput] = useState<FocusedInputShape | null>(
    "startDate"
  );
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.only("xs"));

  const handlendDatesChange = (arg: {
    startDate: moment.Moment | null;
    endDate: moment.Moment | null;
  }) => {
    setStartDate(arg.startDate);
    setEndDate(arg.endDate);
    setDetails &&
      setDetails({
        ...bookingDetails,dates: `${moment(arg.startDate).format("D MMM")} - ${moment(
          arg.endDate
        ).format("D MMM YYYY")}`,travelStartDate: arg.startDate,travelEndDate: arg.endDate,});
  };

  const handleFocusChange = (arg: FocusedInputShape | null) => {
    setFocusedInput(arg);
  };

  const numberOfMonths = moment(packageEndDate).diff(
    moment(packageStartDate),"months",true
  );

  const isOutsideRange = (day: {
    isAfter: (arg0: moment.Moment) => any;
    isBefore: (arg0: moment.Moment) => any;
  }) =>
    day.isAfter(moment(packageEndDate)) ||
    day.isBefore(moment(packageStartDate));

  return (
    <div className={classes.wrapper}>
      {isMobile && (
        <DayPickerRangeController
          startDate={startDate}
          endDate={endDate}
          isOutsideRange={isOutsideRange}
          onDatesChange={handlendDatesChange}
          focusedInput={focusedInput}
          onFocusChange={handleFocusChange}
          initialVisibleMonth={() => moment(new Date(bookingDetails.monthYear))}
          orientation="verticalScrollable"
          numberOfMonths={numberOfMonths}
          endDateOffset={(day) => day.add(bookingDetails.nights,"days")}
          verticalHeight={400}
          noNavButtons
          weekDayFormat="ddd"
          daySize={46}
        />
      )}
      {!isMobile && (
        <DayPickerRangeController
          startDate={startDate}
          endDate={endDate}
          isOutsideRange={isOutsideRange}
          onDatesChange={handlendDatesChange}
          focusedInput={focusedInput}
          onFocusChange={handleFocusChange}
          initialVisibleMonth={() => moment(new Date(bookingDetails.monthYear))}
          numberOfMonths={1}
          endDateOffset={(day) => day.add(bookingDetails.nights,"days")}
          weekDayFormat="ddd"
          daySize={64}
          navNext={
            <IconButton
              aria-label="next"
              className={classes.nextArrow}
              data-testid="calandarNextIcon"
            >
              <KeyboardArrowRightIcon fontSize="small" />
            </IconButton>
          }
          navPrev={
            <IconButton
              aria-label="next"
              className={classes.prevArrow}
              data-testid="calandarPrevIcon"
            >
              <KeyboardArrowLeftIcon fontSize="small" />
            </IconButton>
          }
        />
      )}
    </div>
  );
};

export default DaySelector;

谁能告诉我我哪里做错了。我附上了显示错误的图片。

解决方法

这是您的移动版本，通过与非移动版本进行比较，让我们先尝试将 numberOfMonths 修复为 1。然后你可以调试如果这是问题。

        <DayPickerRangeController
          startDate={startDate}
          endDate={endDate}
          isOutsideRange={isOutsideRange}
          onDatesChange={handlendDatesChange}
          focusedInput={focusedInput}
          onFocusChange={handleFocusChange}
          initialVisibleMonth={() => moment(new Date(bookingDetails.monthYear))}
          orientation="verticalScrollable"
          numberOfMonths={numberOfMonths}
          endDateOffset={(day) => day.add(bookingDetails.nights,"days")}
          verticalHeight={400}
          noNavButtons
          weekDayFormat="ddd"
          daySize={46}
        />

您明白了，桌面版本可以使用，现在就使用该版本。在我看来，两者非常相似，只是表现形式不同。