如何在 React Native 中對一組組件進行排序？

Question

我有一個嵌套映射來遍歷我的數據，然后為我的數據中的每個對象返回一個反應組件。 檢查下面的代碼：

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"
            }
        ]
    }
]

Answer 1

您可以在輸出上使用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);
})