React：将时间戳数组分成几天

Question

My API (NotesData) returns object 数组，其中 key/value 对之一是 PostgreSQL 时间戳，格式如下 2022-04-12T19:25:39.950747+00:00.

我正在创建一个笔记时间轴，数组中的每个 object 都是自己的笔记，有自己的时间戳。到目前为止，我已经映射到数组上以创建一个笔记时间轴，每个笔记旁边都有创建笔记的时间。

我想弄清楚如何根据创建日期将这些笔记分开。例如，所有在 18/04/2022 上创建的笔记都将归入 4 月 18 日星期一的标题下，依此类推。

到目前为止，我有三个功能组件，主要时间轴 (NotesStream)、NoteCard（本质上是旁边带有 HH:MM 的注释）和NoteDate。 NoteDate 是我正在努力弄清楚如何有条件地渲染的组件。

基本上，我需要为每个包含相同日期时间戳的 NoteCard 组件呈现一个 NoteDate 组件。

非常感谢！

时间线：

import NoteCard from './NoteCard';
import NoteDate from './NoteDate';

function NotesStream({
  notesData,
  deleteNote,
}: {
  notesData: any;
  deleteNote: any;
}) {
  return (
    <div className="notes-stream column">
      {notesData && (
        <>
          {notesData.map((note: any) => (
            <NoteCard
              key={note.id}
              id={note.id}
              content={note.note_content}
              time={note.created_at}
              deleteNote={deleteNote}
            />
          ))}
        </>
      )}
    </div>
  );
}

export default NotesStream;

记事卡：

function NoteCard({
  id,
  content,
  time,
  deleteNote,
}: {
  id: number;
  content: string;
  time: string;
  deleteNote: any;
}) {
  const dateTime = new Date(time);

  return (
    <div className="note-card note-card__alternate">
      <div className="note-card--content">
        <p>{content}</p>
      </div>
      <div className="note-card--time note-card--time__alternate">
        <span>
          {dateTime.toLocaleTimeString('uk', {
            hour: '2-digit',
            minute: '2-digit',
          })}
        </span>
      </div>
      <div className="note-card--delete">
        <p
          onClick={() => {
            deleteNote(id);
          }}
        >
          Delete
        </p>
      </div>
    </div>
  );
}

export default NoteCard;

备注日期：

function NoteDate({ date }: { date: string }) {
  return <h2 className="notes-date">{date}</h2>;
}

export default NoteDate;

Answer 1

您可以通过首先 re-shaping 使用 reduce 函数的数据，按日期对您的笔记进行分组来实现这一点。以下片段演示了一种可能的实现方式：

const groupByDate = (notesData) => {
  return notesData.reduce((groups, note) => {
    const date = new Date(note.timestamp).toDateString()
    if (!groups.hasOwnProperty(date)) {
      groups[date] = []
    }
    groups[date].push(note)
    return groups
  }, {})
  
}

const testData = [
  {
    timestamp: "2022-04-12T19:25:39.950747+00:00",
    name : "note 1"
  },
  {
    timestamp: "2022-04-12T19:25:39.950747+00:00",
    name : "note 2"
  }, {
    timestamp: "2022-05-12T19:25:39.950747+00:00",
    name : "note 3"
  }, {
    timestamp: "2022-05-12T19:25:39.950747+00:00",
    name : "note 4"
  }

]
console.log(groupByDate(testData))

然后您可以在 NoteDate 上渲染结果对象的每个键，并在 NoteCard 上渲染每个音符。

请记住，这是一项昂贵的操作，您可能需要使用 useMemo 来记忆它，以避免在每次渲染时重新计算分组日期。

最后，如果您可以访问从中获取信息的 API 代码，处理此问题的正确方法可能是 server-side。如果由 PostgreSQL 完成，按日期对笔记进行分组会更高效！

React：将时间戳数组分成几天

React: Separate array of timestamps into days

javascript

arrays

jsx

typescript

reactjs