我在一个论坛上工作，使用一个用户填写的表单，我把数据作为一个对象存储在一个数组中。我存储的数据包括主题的标题，消息，作者和日期。这些数据存储在一个topic数组中，我把它Map到屏幕上，这样用户就可以看到所有当前的主题。谁创建了它们以及创建它们的日期。我还开始使用localStorage，这样我就可以保存我的数据并进行测试，以确保页面刷新后一切看起来都很好。

const [topic, setTopic] = useState(() => {
  const topicJson = localStorage.getItem("topic");
  return topicJson ? JSON.parse(topicJson) : [];
});

const updatedTopic = [
      ...topic,
      {
        title: title,
        message,
        author: "Dagger",
        date: new Date(),
      },
    ];

    setTopic(updatedTopic);

  };

这就是我正在使用的代码，它按预期工作，但是当我Map数组以在屏幕上发布数据时，我在显示日期时遇到了麻烦，我使用date-fns是因为它显示的日期正是我想要的。
例如：2/19 9:39PM。这就是我希望日期在屏幕上的样子，而使用date-fns是我发现的唯一能让它看起来像这样的方法。

{topic
 .sort((a, b) => b.date - a.date)
 .map(({ date }, index) => (
   <tr>
      {<td>{format(date, "M/dd h:mma")}</td>}
   </tr>
))}

这是我用来Map数组以显示日期的代码。在添加localStorage之前，它工作正常。当我删除format并将代码显示为date时，它工作正常，但包括格式会给我带来以下错误：

throw new RangeError('Invalid time value');
// Convert the date in system timezone to the same date in UTC+00:00 timezone.
// This ensures that when UTC functions will be implemented, locales will be compatible with them.