获取TypeError：`month`必须是移动端Airbnb/react-dates中有效的时刻对象

Question

我在台式机和移动端使用react-dates，但是在移动端我得到了这个错误- TypeError：month必须是一个有效的DayPickerRangeController对象

下面是我的代码-

/* 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",
    top: "12px",
    position: "absolute",
  },
}));

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;

有人能告诉我我哪里做错了吗？我附上了显示错误的图像。

​

Answer 1

这是您的手机版本，通过与非手机版本的比较，让我们先尝试将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}
        />

你已经明白了，桌面版本正在工作，现在就使用这个版本吧。据我所知，两者非常相似，只是在表达上有所不同。