Next.js \"文本内容不匹配\"

Question

我在 Next.js 中有一个组件，它显示从数据库中提取的数据，这一切都很好。当我尝试格式化日期时出现问题，我收到以下警告Warning: Text content did not match. 我大致理解这是与客户端数据与服务器数据不同步有关，但我不确定修复它的最佳方法.我已经看到使用useEffect 的解决方案，但我对这个钩子的了解仍然有点基础。

我目前的想法是格式化日期，然后将它们添加到 projects 对象，然后它们可以与其余数据一起映射，这听起来像一个有效的想法吗？

这是我目前拥有的：

import { useState, useEffect } from 'react';

export default function ProjectList(props) {
  const [projects, setProjects] = useState(props.projects.data);
  
  // format the date
  function formatStartDate(startDate) {
    return Intl.DateTimeFormat('default', {
      month: 'short',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
    }).format(new Date(startDate));
  }

  useEffect(() => {
    setProjects(props.projects.data);
  }, [props]);

  return (
    projects.length > 0 && (
      <>
        {projects &&
          projects.map((project) => (
            <div key={project.id}>
              <h2> {project.attributes.project_name}</h2>
              <p>{formatStartDate(project.attributes.start_date)}</p>
            </div>
          ))}
      </>
    )
  );
}

谢谢！

Answer 1

是的，你走在正确的轨道上。在useEffect 上，您需要格式化日期并更新projects 状态。这确保日期在服务器端的格式正确，并且客户端数据与服务器数据同步。

import { useState, useEffect } from "react";

export default function ProjectList(props) {
  const [projects, setProjects] = useState(props.projects.data);

  // format the date
  function formatStartDate(startDate) {
    return Intl.DateTimeFormat("default", {
      month: "short",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
    }).format(new Date(startDate));
  }

  useEffect(() => {
    // format the dates and update the projects state
    const formattedProjects = props.projects.data.map((project) => {
      return {
        ...project,
        attributes: {
          ...project.attributes,
          start_date: formatStartDate(project.attributes.start_date),
        },
      };
    });

    setProjects(formattedProjects);
  }, [props]);

  return (
    projects.length > 0 && (
      <>
        {projects &&
          projects.map((project) => (
            <div key={project.id}>
              <h2> {project.attributes.project_name}</h2>
              <p>{project.attributes.start_date}</p>
            </div>
          ))}
      </>
    )
  );
}