javascript 在JSX中使用不同的视图渲染数组

lf5gs5x2  于 2023-03-11  发布在  Java
关注(0)|答案(2)|浏览(170)

我有一个日志数组,其结构如下所示:

LogItems = [
    {
       description: "I am the first log";
       timestamp: "2023-02-20T20:15:43.2357511Z"
    }, 
    {
       description: "I am the fourth log";
       timestamp: "2023-02-20T21:20:43.2357511Z"
    }, 
    {
       description: "I am the second log";
       timestamp: "2023-01-20T20:10:43.2357511Z"
    },
    {
       description: "I am the third log";
       timestamp: "2023-01-20T20:10:43.2357511Z"
    }
];

现在,我想在另一个react组件中呈现这些数据,如下所示:

20 Jan 2023
    8:10:PM
         I am the second log
         I am the third log
20 Feb 2023
   8:15 PM
        I am the first log
   9:20 PM
        I am the fourth log

我应该从日志数组创建一个新的对象文字来创建一个类似于我创建的视图的嵌套数组,还是可以直接在JSX中的所需视图中呈现此数据?
我是新的React,所以,任何建议都会很有帮助。

ctehm74n

ctehm74n1#

你可以使用reduce将数组分组到一个按日期和时间分组的对象中。2我使用了2个辅助函数来格式化日期和时间。3因为你需要一月一号,所以我首先按纪元对数组排序

const LogItems = [   {       description: "I am the first log",       timestamp: "2023-02-20T20:15:43.2357511Z"    },     {       description: "I am the fourth log",       timestamp: "2023-02-20T21:20:43.2357511Z"    },    {       description: "I am the second log",      timestamp: "2023-01-20T20:10:43.2357511Z"    },    {       description: "I am the third log",       timestamp: "2023-01-20T20:10:43.2357511Z"    }];

// Format date
const formattedDate = (date) => `${date.getUTCDate()} ${date.toLocaleString('default', { month: 'short',timeZone: 'UTC' })} ${date.getUTCFullYear()}`

// Format time
const formattedTime = (date) => `${date.getUTCHours() % 12 || 12}:${date.getUTCMinutes() < 10 ? '0' : ''}${date.getUTCMinutes()} ${date.getUTCHours() >= 12 ? 'PM' : 'AM'}`

const res = LogItems
.map(x => ({...x,timestamp:new Date(x.timestamp)}))
.sort((a,b) => a.timestamp.getTime()-b.timestamp.getTime())
.reduce((acc,{description, timestamp})=>{
  const fDate = formattedDate(timestamp)
  const fTime = formattedTime(timestamp)
  acc[fDate] = acc[fDate] || {}
  acc[fDate][fTime] = acc[fDate][fTime] || []
  acc[fDate][fTime].push(description)
  return acc
},{})
console.log(res)

在react中,你可以使用nested map调用来实现对象的嵌套渲染。Object.entries用于将对象转换为一个由[key,value]对组成的数组,这样我就可以在对象上调用map。另外,key属性使用唯一值,避免使用数组index。这里只是为了简单起见而使用
x一个一个一个一个x一个一个二个x

4ngedf3f

4ngedf3f2#

首先,你应该按天对日志进行分组,格式应该像2023-01-20
然后按时间对日志进行分组,格式应该是20:10
最后一个数组应该如下所示:

LogItems = [
   {
      day: "2023-01-20",
      times: [
         {
            time: "20:10",
            descriptions: [
               "I am the third log",
               "I am the second log"
            ]
         }
      ]
   },
   {
      day: "2023-02-20",
      times: [
         {
            time: "20:15",
            descriptions: [
               "I am the first log"
            ]
         },
         {
            time: "21:20",
            descriptions: [
               "I am the fourth log"
            ]
         }
      ]
   }
];

这是密码:

const groupedLogs = LogItems.reduce((result, log) => {
  const [date, time] = log.timestamp.split('T');
  const day = date;
  const hour = time.slice(0, 5);
  const description = log.description;

  const existingDay = result.find((item) => item.day === day);
  if (existingDay) {
    const existingHour = existingDay.times.find((item) => item.time === hour);
    if (existingHour) {
      existingHour.descriptions.push(description);
    } else {
      existingDay.times.push({
        time: hour,
        descriptions: [description],
      });
    }
  } else {
    result.push({
      day: day,
      times: [
        {
          time: hour,
          descriptions: [description],
        },
      ],
    });
  }
  return result;
}, []);

相关问题