Nextjs水合失败客户端和服务器之间的时间不匹配

trnvg8h3  于 2023-05-17  发布在  其他
关注(0)|答案(1)|浏览(186)

因此,我在Next应用程序中创建了一个时间轴组件,在呈现UI时,控制台中会抛出此错误
警告:文本内容不匹配。服务器:“May 2022 - Present”客户端:“2022年4月-无效日期
错误:文本内容与服务器呈现的HTML不匹配。
错误:由于初始UI与在服务器上呈现的UI不匹配,水合失败。
错误:补水时出错。由于错误发生在Suspense边界之外,因此整个根将切换到客户端渲染。
下面是代码片段

const Timeline = ({experiences}) => {
      experiences.forEach((experience) => {
      experience.startDate =  new Date(experience.startDate).toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
      experience.endDate = experience.endDate ? new Date(experience.endDate).toLocaleDateString('en-US', {year: 'numeric', month: 'short'}): 'Present';
      });

    return (
       <div>
         {experiences.map((experience,idx) => (
           <div key={`timeline-item-${idx}`}>
            {`${experience.startDate} - ${experience.endDate}`}
           </div>))}
       </div>
dm7nw8vv

dm7nw8vv1#

这是因为您的服务器和客户端具有不同的区域设置。您可以通过使用useEffect和useState钩子来强制客户端呈现。下面是useClientSideDate钩子的示例。(我正在使用luxon处理日期)。

export const useClientSideDate = (isoDate: string | null): string | null => {
  const [localDate, setLocalDate] = useState<string | null>(null);

  useEffect(() => {
    if (isoDate) {
      const dateTime = DateTime.fromISO(isoDate);
      setLocalDate(dateTime.isValid ? dateTime.toLocaleString() : null);
    } else {
      setLocalDate(null);
    }
  }, [isoDate]);

  return localDate;
};

相关问题