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

trnvg8h3 于 2023-05-17 发布在其他

关注(0)|答案(1)|浏览(185)

因此，我在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>

next.js

来源：https://stackoverflow.com/questions/73821742/nextjs-hydration-failed-mismatched-time-between-client-and-server

1条答案

按热度按时间

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;
};

赞(0）回复(0）举报 2023-05-17

我来回答

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

1条答案

相关问题

热门标签

最新问答