在反应中停止日期更新的最佳方法是什么？

我正在映射对象数组并在卡片中显示它们的值，每个对象都有一个标题、评论和 datePosted 字段。 datePosted 字段通过我制作的函数将其显示在卡片上为“2 小时前发布”或“2 分钟前发布”。尽管每次状态发生变化，这都会更新，这在几天前甚至几小时前发布时不是问题，因为没有任何变化，但是当首次上传并保存新帖子时，显示的日期几乎每次您键入时都会更新一个键，因为它从“1秒前发布”到“2秒前发布”，再到“3秒前发布”等等......我可以做些什么来解决这个问题，我考虑过将组件保存在不同的状态并显示它，但我认为这不会起作用，因为每次用户更改标题或评论时都需要更新状态所以可以实时显示。

下面是一个 JSX 的示例，它显示了该卡，以防有帮助。 timeCalc 是计算帖子创建前多久的函数

{posts.map(item => (
  <div>
    <div>
      <h1>{item.title}</h1>
      <h3>{item.comment}</h3>
    </div>
    <div>
      <h3>{timeCalc(item.datePosted)}</h3>
    </div>
  </div>
))}

我会将代码提取到其自己的组件中，然后该组件可以使用几种可能的技术之一来记住其第一次渲染的值。这是一个useMemo:

{posts.map(item => <Post item={item}/>)}

//... elsewhere:
const Post = ({ item }) => {
  const time = useMemo(() => {
    return timeCalc(item.datePosted);
  }, []);

  return (
    <div>
      <div>
        <h1>{item.title}</h1>
        <h3>{item.comment}</h3>
      </div>
      <div>
        <h3>{time}</h3>
      </div>
    </div>
  );
}

记住初始值的其他可能方法是使用状态：

const Post = ({ item }) => {
  // Note that i have no need for `setTime`, as this value will never be changed
  const [time] = useState(timeCalc(item.datePosted));

或者使用参考：

const Post = ({ item }) => {
  const timeRef = useRef(timeCalc(item.datePosted));

  // ...
  <h3>{timeRef.current}</h3>