Getting error of "RangeError: Invalid time value" when inputing variable within new Date()

Question

function search() {
  const router = useRouter();
  const { location, startDate, endDate, numOfGuests } = router.query;

  const formattedStartDate = format(new Date(startDate), "dd, MMMM yyyy");
  const formattedEndDate = format(new Date(endDate), "dd, MMMM yyyy");
  const range = `${formattedStartDate} - ${formattedEndDate}`;
  return(...);
  }

export default search;

使用 React/Next.js。我正在尝试使用 date-fns 创建格式化日期。问题似乎是当我将 startDate 的变量输入 new Date() ex: new Date(startDate) 时，它给了我错误。当我手动硬编码 startDate 的值时，它会根据需要工作，例如：new Date("2022-01-28T05:00:00.000Z")。我什至尝试通过 startDate.toString() 将 startDate 变成一个字符串，但仍然不起作用。

startDate 来自 date-fns DateRangePicker，允许您 select 两个日期。然后我通过 next.js 路由器将其作为查询推送

const search = () => {
    router.push({
      pathname: "/search",
      query: {
        location: searchInput,
        startDate: startDate.toISOString(),
        endDate: endDate.toISOString(),
        numOfGuests,
      },
    });
  };

Answer 1

我想通了我的问题。一切正常，代码应该按预期工作。问题出在使用 nextJs，useRouter()。要访问路由器，我需要使用 useRouter()，例如：const router = useRouter();。然后访问我在路由器中设置的查询数据，例如：const { location, startDate, endDate, numOfGuests } = router.query;.

要使用 useRouter，它需要位于以大写名称开头的适当组件函数中。我的问题是它是小写的。例子 ; function search() {...} 而不是 function Search() {...}。从这里开始，为了地址栏路由器查询的目的，我将 search.js 的文件名保持小写。

Getting error of "RangeError: Invalid time value" when inputing variable within new Date()

Getting error of "RangeError: Invalid time value" when inputing variable within new Date()

reactjs

date

next.js

date-fns