如何在React+Redux项目中使用javascript-time-ago实现相对时间展示

核心问题说明：你当前的实现逻辑存在本质缺陷，添加待办时直接将格式化后的静态相对时间字符串存入了Redux，这个值不会随着时间推移自动更新，无法实现类似聊天应用的实时相对时间展示效果。

调整思路 #

• Redux中仅存储待办添加时的原始时间戳，不存储格式化后的时间文本
• 在列表渲染组件中实时计算相对时间，同时适配小于1分钟时显示「刚刚添加」的需求
• 全局注册一次语言包即可，不要放在组件渲染逻辑中重复执行

修改后 Addtodo.js 代码 #

import { useState } from "react";
import { useDispatch } from "react-redux";
import { addTodos } from "./action";
import ShowData from "./ShowData";

export default function Add() {
  const dispatch = useDispatch();
  const [note, setNewNote] = useState('');

  const add = () => {
    // 直接存入原始时间戳到Redux
    dispatch(addTodos({ name: note, time: Date.now() }));
  };

  return (
    <div>
      <input
        type="text"
        value={note}
        onChange={(e) => setNewNote(e.target.value)}
      />
      <button onClick={add}>添加新待办</button>
      <ShowData />
    </div>
  );
}

修改后 Showtodo.js 代码 #

import TimeAgo from "javascript-time-ago";
import en from "javascript-time-ago/locale/en";
import { useSelector } from "react-redux";

// 全局注册语言包，仅执行一次
TimeAgo.addDefaultLocale(en);
const timeAgo = new TimeAgo("en-US");

export default function ShowData() {
  const todos = useSelector((state) => state.todos);
  const now = Date.now();

  // 自定义时间格式化逻辑
  const formatTime = (timestamp) => {
    const diff = now - timestamp;
    // 小于60秒展示「刚刚添加」
    if (diff < 60 * 1000) {
      return '刚刚添加';
    }
    return timeAgo.format(timestamp);
  }

  return (
    <div>
      {todos.map((item, i) => (
        <li key={i}>
          {item.name}
          <span style={{ marginLeft: "15px" }}>{formatTime(item.time)}</span>
        </li>
      ))}
    </div>
  );
}

如果需要实现时间自动刷新（比如待办放置1分钟后自动从「刚刚添加」更新为「1 minute ago」），只需要在ShowData组件中添加1分钟触发一次的定时器，更新当前时间触发组件重渲染即可。

内容的提问来源于stack exchange，提问作者Khan Iqbal