Next.js - new Date() 构造函数抛出控制台错误

Question

我正在尝试在 Next.js 反应组件中使用 new Date() 构造函数。但它在生产中抛出低于控制台的错误。

这就是我使用日期构造函数的方式。

date: "2022-06-21T18:30:00.000Z"

{new Date(date).toLocaleDateString("en-US")}

Uncaught Error: Minified React error #425; - https://reactjs.org/docs/error-decoder.html?invariant=425
Uncaught Error: Minified React error #418; - https://reactjs.org/docs/error-decoder.html?invariant=418
Uncaught Error: Minified React error #423; - https://reactjs.org/docs/error-decoder.html?invariant=423

知道为什么会这样。如有帮助，将不胜感激。谢谢！

Answer 1

根据 @bcjohn 的评论，我发现可以通过格式化日期useEffect而不是直接将其添加到 中来修复水合错误jsx。

这是我为格式化日期编写的自定义挂钩。

import { useState, useEffect } from "react";

const useFormattedDate = (date) => {
  const [formattedDate, setFormattedDate] = useState(null);

  useEffect(
    () => setFormattedDate(new Date(date).toLocaleDateString("en-US")),
    []
  );

  return formattedDate;
};

export default useFormattedDate;

使用示例

const date = useFormattedDate(obj.date);