如何在 react 和 redux 中使用 javascript-time-ago答案

【问题标题】：How to use javascript-time-ago with react and redux如何在 react 和 redux 中使用 javascript-time-ago
【发布时间】：2021-09-01 10:33:14
【问题描述】：

嗨，我正在使用 Reactjs 和 Redux 创建一个简单的待办事项应用程序。在待办事项中，我有两个属性 todo name 和 time。我将所有待办事项存储在 Redux 中。现在问题是我希望当用户获取待办事项时，如果该待办事项已在 1 分钟前添加，则应显示为已添加待办事项one minute ago，如果刚刚添加待办事项，则应显示为刚刚添加的内容。像这样。像任何聊天应用程序我们有这样的功能 All my code here

//Addtod.js

import TimeAgo from "javascript-time-ago";
import en from "javascript-time-ago/locale/en";
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();

  TimeAgo.addDefaultLocale(en);
  const timeAgo = new TimeAgo("en-US");

  const add = () => {
    let t = timeAgo.format(Date.now() - 60 * 1000);
    dispatch(addTodos({ name: note, time: t }));
  };

  return (
    <div>
      <input
        type="text"
        value={note}
        onChange={(e) => setNewNote(e.target.value)}
      />
      <button onClick={add}>Add new</button>
      <ShowData />
    </div>
  );
}

//Showtodo.js

    

import { useSelector } from "react-redux";
    export default function ShowData() {
      const todos = useSelector((state) => state.todos);
    
      return (
        <div>
          {todos.map((item, i) => (
            <li key={i}>
              {item.name}
              <span style={{ marginLeft: "15px" }}>{item.time}</span>
            </li>
          ))}
        </div>
      );
    }

【问题讨论】：

您的沙箱没有显示项目，添加它们似乎也不起作用。并且使用 time-ago 与 redux 或 react 无关，它只是将日期转换为字符串。请澄清确切的问题，因为我正在尝试修复您的沙箱，但显然它甚至无法正常工作。

标签： javascript reactjs datetime redux

【解决方案1】：

您的实现问题在于，在add.js 中，您正在硬编码稍后将显示的消息。您需要做的是保存将任务添加到列表中的时间，然后在渲染组件时计算从该保存时间经过的时间。您可以使用 npm 包moment 计算经过的时间。

将此更改为Add.js

const add = () => {
    // All you are saving now is the time this note was saved to memory
    dispatch(addTodos({ name: note, time: Date.now() }));
  };

  return (
    <div>
      <input
        className="input"
        type="text"
        value={note}
        onChange={(e) => setNewNote(e.target.value)}
      />
      <button onClick={add}>Add new</button>
      <ShowData />
    </div>
  );
}

使用命令npm i moment安装npm包moment。

然后将包导入ShowData.js 将此更改为ShowData.js

import { useSelector } from "react-redux";
import moment from "moment";
import "./styles.css";
export default function ShowData() {
  const todos = useSelector((state) => state.todos);
  return (
    <div style={{ marginLeft: "50px" }}>
      {todos.map((item, i) => (
          <li key={i} className="message">
            {item.name}
            <span style={{ marginLeft: "35px" }}>
              {/* calculate the difference in minutes */}
              {moment().diff(moment(item.time), "minute")} minutes
            </span>
          </li>
        ))}
    </div>
  );
}

【讨论】：