Hướng dẫn Gọi API và Hiển thị dữ liệu JSON lên FlatList trong React Native

Trong quá trình phát triển ứng dụng di động, việc lấy dữ liệu từ server và hiển thị ra giao diện là một kỹ năng nền tảng. Một trong những trường hợp phổ biến nhất là gọi API lấy dữ liệu JSON và trình bày nó trong một danh sách cuộn — sử dụng FlatList trong React Native.

Bài viết này sẽ hướng dẫn bạn cách thực hiện bài bản và rõ ràng.

Hiểu về API và JSON

• API (Application Programming Interface): Là giao diện giao tiếp giữa ứng dụng và server, cho phép lấy hoặc gửi dữ liệu.
• JSON (JavaScript Object Notation): Là định dạng dữ liệu phổ biến, nhẹ và dễ thao tác, thường dùng trong các phản hồi API.

Các bước thực hiện

1. Gọi API để lấy dữ liệu

Việc gọi API thường thực hiện bên trong useEffect nhằm đảm bảo yêu cầu được gửi khi component được mount.

useEffect(() => {

 fetch('https://api.example.com/data')

  .then(response => response.json())

  .then(json => setData(json))

  .catch(error => console.error(error));

}, []);

Giải thích:

• fetch gửi yêu cầu GET đến API.
• response.json() chuyển đổi phản hồi thành định dạng JSON.
• setData(json) lưu dữ liệu vào state để sử dụng trong giao diện.

2. Hiển thị dữ liệu bằng FlatList

FlatList sẽ tự động render từng item từ mảng dữ liệu.

<FlatList  

 data={data}

 keyExtractor={item => item.id.toString()}

 renderItem={({ item }) => (

  <Text>{item.title}</Text>

 )}

/>

Giải thích:

• data: nguồn dữ liệu là mảng JSON.
• keyExtractor: giúp FlatList nhận diện từng phần tử duy nhất.
• renderItem: xác định cách mỗi item được hiển thị.

Một số lưu ý quan trọng

• Xử lý lỗi: Bắt lỗi khi fetch API để tránh crash ứng dụng.
• Loading Indicator: Hiển thị trạng thái tải dữ liệu giúp cải thiện trải nghiệm người dùng.
• Tối ưu FlatList: Với dữ liệu lớn, nên chú trọng tối ưu hóa để tránh tụt hiệu suất.

Kết luận

Việc thành thạo quy trình gọi API và hiển thị dữ liệu lên FlatList không chỉ phục vụ nhu cầu hiển thị danh sách đơn giản mà còn là nền tảng để bạn phát triển những ứng dụng di động phức tạp hơn như: chat realtime, mạng xã hội, thương mại điện tử, v.v.

Tuy nhiên, trong thực tế, các bài toán thường phức tạp hơn:

• API có độ trễ cao, cần cache dữ liệu
• Cần phân trang (pagination) cho danh sách lớn
• Xử lý các tình huống lỗi mạng, mất kết nối
• Tối ưu hiệu suất khi dữ liệu có hàng ngàn bản ghi

Để giải quyết tốt những vấn đề đó, cần một lộ trình học bài bản và thực chiến.

Khoá học:  "React Native - Từ Cơ Bản đến Triển Khai Thực Tế"

Nếu bạn muốn:

• Nắm vững cách tối ưu hóa việc gọi API (với Axios, React Query)
• Xây dựng các FlatList lớn mượt mà, phân trang tự động, pull-to-refresh
• Quản lý state phức tạp (Context, Redux, Zustand)
• Làm chủ quy trình phát triển ứng dụng thực tế, triển khai lên App Store, Google Play

Thì khoá học "React Native - Từ Cơ Bản đến Triển Khai Thực Tế" sẽ là một lựa chọn phù hợp.

Khoá học không chỉ dạy lý thuyết mà còn hướng dẫn thực hành các dự án thực tế như:

• Ứng dụng mạng xã hội mini
• Ứng dụng bán hàng trực tuyến
• Hệ thống quản lý đơn hàng

Ngoài ra, khóa học còn đi kèm hướng dẫn kỹ thuật triển khai API backend riêng để bạn thực sự làm chủ quy trình xây dựng một sản phẩm hoàn chỉnh.

Quan trọng nhất, sau khóa học, bạn sẽ có thể tự tin triển khai ứng dụng mobile hoàn chỉnh từ đầu đến cuối.

Link đăng ký khóa học: https://laptrinh-online.vn/course/lap-trinh-react-native

Địa chỉ: Trung tâm CodeFresher – Số 104 Hoàng Ngân, Cầu Giấy, Hà Nội.

SĐT: Ms Nga – 0968089175 , Ms Diệu – 0332026803 (zalo/call)