我有一个日志数组,其结构如下所示:
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,所以,任何建议都会很有帮助。
2条答案
按热度按时间ctehm74n1#
你可以使用
reduce
将数组分组到一个按日期和时间分组的对象中。2我使用了2个辅助函数来格式化日期和时间。3因为你需要一月一号,所以我首先按纪元对数组排序在react中,你可以使用nested map调用来实现对象的嵌套渲染。
Object.entries
用于将对象转换为一个由[key,value]
对组成的数组,这样我就可以在对象上调用map
。另外,key
属性使用唯一值,避免使用数组index
。这里只是为了简单起见而使用x一个一个一个一个x一个一个二个x
4ngedf3f2#
首先,你应该按天对日志进行分组,格式应该像
2023-01-20
。然后按时间对日志进行分组,格式应该是
20:10
。最后一个数组应该如下所示:
这是密码: