javascript - 如何在 React Native 中对一组组件进行排序?
问题描述
我有一个嵌套映射来遍历我的数据,然后为我的数据中的每个对象返回一个反应组件。检查下面的代码:
return props.dataArray.map((classObj) => {
return classObj.timetable.map((timetableObj) => {
if (timetableObj.weekday === props.day) {
return ttCard({
lecturer: classObj.lecturer,
module: classObj.module,
room: classObj.room,
class_id: classObj.id,
timetable_id: timetableObj.id,
startTime: timetableObj.start_time,
endTime: timetableObj.end_time,
weekday: timetableObj.weekday
});
}
return null;
});
});
我的问题是我的组件没有排序,它们必须排序,因为它是学生的时间表。查看下图,注意 10:30 AM 是我标签视图中的最新卡片:
到目前为止我尝试过的事情:
1-创建一个新数组,然后在if statement
块之后对其进行排序-不工作 2-将排序后的数组返回到函数并将该数组映射以返回组件-不工作 3-循环并将对象作为组件参数中的函数返回:
ttCard( sortedArr.forEach((ttObject) => {
return ttObject
}))
也不工作
我已经用谷歌搜索并尝试进行研究,但到目前为止没有希望。我知道最初我的嵌套地图很糟糕,但这就是我的对象的样子:
[
{
"class_code": "English-5-G-2-L-1911-test-teacher",
"id": 23,
"lecturer": "test teacher",
"module": "English-5",
"room": "L",
"timetable": [
{
"end_time": "9:00",
"id": 37,
"start_time": "8:00",
"weekday": "Sunday"
},
{
"end_time": "10:00",
"id": 38,
"start_time": "9:00",
"weekday": "Sunday"
},
{
"end_time": "10:00",
"id": 47,
"start_time": "9:00",
"weekday": "Monday"
},
{
"end_time": "10:00",
"id": 48,
"start_time": "9:00",
"weekday": "Tuesday"
},
{
"end_time": "11:30",
"id": 52,
"start_time": "10:30",
"weekday": "Tuesday"
},
{
"end_time": "11:30",
"id": 54,
"start_time": "10:30",
"weekday": "Thursday"
},
{
"end_time": "12:30",
"id": 58,
"start_time": "11:30",
"weekday": "Thursday"
},
{
"end_time": "14:00",
"id": 61,
"start_time": "13:00",
"weekday": "Wednesday"
}
]
}
]
解决方案
您可以sort
在输出中使用 startTime 来排列数组
.sort((a, b) => {
// These lines are so we can directly compare the times
// I would recommend to send timestamps down with your data (if possible)
var aTime = a.startTime.replace(':', '');
var bTime = b.startTime.replace(':', '');
// Sort by smallest first
return aTime - bTime;
});
我还建议过滤掉数组中的空值
使用您的示例-
var classesArr = props.dataArray.map((classObj) => {
return classObj.timetable.map((timetableObj) => {
if (timetableObj.weekday === props.day) {
return {
lecturer: classObj.lecturer,
module: classObj.module,
room: classObj.room,
class_id: classObj.id,
timetable_id: timetableObj.id,
startTime: timetableObj.start_time,
endTime: timetableObj.end_time,
weekday: timetableObj.weekday
}
}
return null;
}).filter(x => x); // Filter out any null values
}).filter(x => x); // Filter out any null values.
// Flatten array so it is sortable/mapable
return [].concat.apply([], classesArr).sort((a, b) => {
// These lines are so we can directly compare the times
// I would recommend to send timestamps down with your data (if possible)
var aTime = a.startTime.replace(':', '');
var bTime = b.startTime.replace(':', '');
// Sort by smallest time first
return aTime - bTime;
}).map((x) => {
return ttCard(x);
})
推荐阅读
- file - Symfony 4 - VichUploader 可以删除文件吗?
- api - 如何验证变量可以有一个 NULL 或字符串格式的值
- c# - 如何在asp.net C#中将数据转换为数组形式?
- eclipse - 将 tomcat 与 Eclipse Ide 集成时出现错误
- xml - 为什么我每次都会收到 DTD 错误?
- javascript - 请问我能找到类似这个设计的日期选择器库吗?
- java - 如何在 GWT JSNI 中将返回值从 javascript 转换为 java?
- python - 使用 `contains` 合并 DataFrame(不是完全匹配!)
- javascript - 控制台记录对象值
- javascript - 在 Vue.js 中使用 owl.carousel.js 跳转到某个元素