Danh sách đơn hàng có hai nhóm “Đang xử lý” và “Hoàn tất” cần tiêu đề cho từng nhóm, nhưng vẫn nên cuộn như một danh sách thống nhất. Thay vì dựng nhiều danh sách rồi tự ghép vùng cuộn, bạn có thể truyền cấu trúc nhóm cho SectionList.
Bài dành cho dự án React Native đã chạy được màn hình TypeScript. API được đối chiếu tài liệu hiện hành ngày 27/10/2026. Phần gom dữ liệu được kiểm tra riêng; ví dụ TSX chưa build hoặc chạy trên thiết bị, nên cần thực hiện checklist giao diện ở cuối trước khi dùng trong sản phẩm.
1. Dữ liệu cần có hai tầng định danh
Một section có mảng data và thông tin bổ sung như tiêu đề. Trong ví dụ, section.key là mã trạng thái ổn định, còn item.id là mã đơn. Không dùng tiêu đề đã dịch làm key nếu nó có thể thay đổi theo ngôn ngữ.
Hàm gom nhóm dưới trả về đúng thứ tự nghiệp vụ và bỏ nhóm rỗng. Nó giả định dữ liệu đã qua validation để trạng thái chỉ có hai giá trị khai báo. Nếu backend có trạng thái mới, cần cập nhật hợp đồng hoặc có nhóm dự phòng; TypeScript không tự kiểm tra JSON nhận từ mạng.
2. Một màn hình minh họa
Đặt component vào màn hình có chiều cao được giới hạn và đã xử lý vùng an toàn của ứng dụng. Ví dụ không cài thêm thư viện và không gọi API:
import React from 'react';
import {SectionList, StyleSheet, Text, View} from 'react-native';
type Order = {
id: string;
label: string;
status: 'processing' | 'done';
};
type OrderSection = {key: string; title: string; data: Order[]};
const orders: Order[] = [
{id: 'o1', label: 'Đơn sách', status: 'processing'},
{id: 'o2', label: 'Đơn bàn phím', status: 'done'},
{id: 'o3', label: 'Đơn tai nghe', status: 'processing'},
];
function groupOrders(items: Order[]): OrderSection[] {
return [
{
key: 'processing', title: 'Đang xử lý',
data: items.filter(item => item.status === 'processing'),
},
{
key: 'done', title: 'Hoàn tất',
data: items.filter(item => item.status === 'done'),
},
].filter(section => section.data.length > 0);
}
export default function OrdersScreen() {
return (
<View style={styles.screen}>
<SectionList<Order, OrderSection>
style={styles.list}
sections={groupOrders(orders)}
keyExtractor={item => item.id}
stickySectionHeadersEnabled={false}
contentContainerStyle={styles.content}
ListHeaderComponent={<Text style={styles.heading}>Đơn hàng</Text>}
renderSectionHeader={({section}) => (
<Text style={styles.sectionTitle}>{section.title}</Text>
)}
renderItem={({item}) => (
<Text style={styles.item}>{item.label}</Text>
)}
ListEmptyComponent={<Text>Chưa có đơn hàng.</Text>}
/>
</View>
);
}
const styles = StyleSheet.create({
screen: {flex: 1},
list: {flex: 1},
content: {padding: 16},
heading: {fontSize: 24, fontWeight: '700', marginBottom: 12},
sectionTitle: {fontSize: 18, fontWeight: '600', marginTop: 16},
item: {fontSize: 16, paddingVertical: 12},
});Dữ liệu giả cho nhóm processing hai đơn theo thứ tự o1, o3 và nhóm done một đơn o2. Danh sách có một header chung và header của từng section. stickySectionHeadersEnabled={false} ghi rõ lựa chọn của ví dụ, tránh dựa vào mặc định khác nhau giữa Android và iOS.
3. Kiểm tra nhóm rỗng và thứ tự
Thay orders bằng mảng rỗng: hàm trả về [], nên danh sách có thể hiển thị empty component mà không còn những header nhóm trống. Nếu sản phẩm muốn hiện cả nhóm chưa có đơn, hãy giữ section rỗng và thiết kế thông báo riêng cho nhóm đó.
Đảo thứ tự dữ liệu đầu vào rồi kiểm tra quy tắc của bạn. Hàm chỉ phân nhóm, không tự sắp theo thời gian. Nếu yêu cầu đơn mới nhất đứng trước, sắp xếp trên một bản sao hoặc chuẩn hóa dữ liệu trước khi đưa vào section; đừng giả định SectionList tự hiểu thứ tự nghiệp vụ.
4. Cập nhật mảng thay vì sửa âm thầm
SectionList có cơ chế so sánh props nông. Khi chuyển một đơn sang trạng thái done, tạo dữ liệu mới rồi dựng lại các section liên quan, thay vì sửa object trong mảng cũ và hy vọng danh sách tự phát hiện mọi thay đổi.
Nếu cách render còn phụ thuộc một lựa chọn ở ngoài dữ liệu, chẳng hạn ID đơn đang chọn, truyền thông tin đó qua prop phù hợp như extraData và cập nhật bất biến. Ví dụ tĩnh chưa có lựa chọn bên ngoài nên không thêm prop chỉ để trang trí.
Key ổn định giúp nhận diện hàng khi thứ tự thay đổi; nó không biến state cục bộ trong từng hàng thành dữ liệu bền vững. Với trạng thái như “đã chọn đơn”, lưu nó theo ID ở dữ liệu màn hình hoặc store thích hợp, vì virtualization có thể đưa hàng ra khỏi vùng render.
Kiểm tra giao diện và giới hạn
Chạy trên Android và iOS với cỡ chữ lớn, tiêu đề dài và đủ dữ liệu để cuộn. Thử cả mảng rỗng, nhóm chỉ có một đơn và chuyển một đơn sang nhóm khác. Xác nhận tên đơn không đổi nhầm và header xuất hiện đúng vị trí.
Giữ màn hình này là một danh sách cuộn chính; dùng ListHeaderComponent cho nội dung đầu danh sách thay vì thêm ScrollView ngoài chỉ để chứa tiêu đề. Với bố cục cuộn phức tạp, cần kiểm tra riêng hành vi lồng nhau và virtualization.
Phần gom nhóm đã được chạy với fixture nhỏ trong lượt biên tập, không đo FPS, bộ nhớ hay khả năng render một lượng đơn cụ thể. Nếu không cần nhóm và header nhóm, FlatList có giao diện đơn giản hơn. Chọn SectionList khi cấu trúc nội dung của bạn thực sự có các phần riêng.
