时间戳

首页 > 解决方案 > 在 .map() 函数内的第一个键之前附加一个元素

javascript - 在 .map() 函数内的第一个键之前附加一个元素

问题描述

我想重新创建类似whatsapp/telegram 的时间线，其中消息按天数划分。
为了在 React 中呈现消息，我使用 Object.key(messages).map 函数。 

Object.keys(this.messages).map(e => {
    return <div key={i++}>
              { this.messages[e] }

如何在昨天的最后一条消息和今天的第一条消息之间添加例如“今天”？

标签： javascriptreactjs

解决方案

我会将所有消息分组到单独的数组中，每个数组对应发生的每一天。为了做到这一点，创建一个对象——它的键将是唯一的日子，它的值——来自这些日子的消息。

// object similar to your 'messages' state
const messages = {
  message1: {
    body: "one day before message",
    time: 1534433188201
  },
  message2: {
    body: "newest message",
    time: 1534519588201
  },
  message3: {
    body: "2 days before newest message",
    time: 1534346788201
  },
  message4: {
    body: "also 2 days before newest message",
    time: 1534346788250
  }
};
// creating array from your object
const messagesArray = Object.keys(messages).map(m => messages[m]);
// sorting array - oldest to newest
const latestMessages = messagesArray.sort((a, b) => a.time > b.time);
// grouping by date - create an object, each key is a different date and value is an array of messages from that day
const groupedByDate = {};
latestMessages.forEach(message => {
  const date = new Date(message.time);
  const day = date.getDate();
  const month = date.getMonth();
  const year = date.getFullYear();
  // this will create 'date_17-7-2018' format as an example - you can do whatever you want/need here
  const key = `date_${day}-${month}-${year}`;
  // push message to existing key or create new array containing this message
  if(groupedByDate[key]) {
    groupedByDate[key].push(message);
  } else {
    groupedByDate[key] = [message];
  }
});
console.log(groupedByDate);

渲染部分现在看起来很容易 - 这是一个我将如何处理的示例：

映射Object.keys(groupedByDate)每个键返回div或span使用className="date-label"（示例）。如果从这个键中提取的一天等于(new Date()).getDate()- 渲染“今天”，如果是(new Date()).getDate() - 1- 渲染“昨天”，否则渲染“X天前”。现在在这个map循环中，您还需要map覆盖groupedByDate[key]（今天的消息数组）并呈现消息。

推荐阅读