Gọi API trong React Native: loading, error và empty state

Sau khi đã biết component, state, effect, FlatList và navigation, bạn đã sẵn sàng gọi API. Đây là lúc app bắt đầu lấy dữ liệu thật từ server thay vì dùng mảng giả trong code.

Trong React Native, bạn có thể dùng fetch để gọi HTTP API. Nhưng gọi API không chỉ là lấy dữ liệu. UI còn cần xử lý các trạng thái: đang tải, lỗi, không có dữ liệu và có dữ liệu.

Mẫu state cơ bản khi gọi API

Một màn hình gọi API thường cần ít nhất ba state: data, loading, error.

const [articles, setArticles] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');

articles giữ dữ liệu. loading cho biết đang tải. error giữ thông báo lỗi nếu request thất bại.

Gọi API bằng useEffect

import { useEffect, useState } from 'react';
import { ActivityIndicator, FlatList, Text, View } from 'react-native';

function ArticleListScreen() {
  const [articles, setArticles] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  useEffect(() => {
    async function loadArticles() {
      try {
        setLoading(true);
        setError('');

        const response = await fetch('https://example.com/api/articles');
        const data = await response.json();

        setArticles(data);
      } catch (err) {
        setError('Không tải được danh sách bài viết');
      } finally {
        setLoading(false);
      }
    }

    loadArticles();
  }, []);

  if (loading) {
    return <ActivityIndicator style={{ flex: 1 }} />;
  }

  if (error) {
    return <Text>{error}</Text>;
  }

  return (
    <FlatList
      data={articles}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      ListEmptyComponent={<Text>Chưa có bài viết nào</Text>}
    />
  );
}

Ví dụ này chưa phải kiến trúc hoàn hảo, nhưng rất tốt cho người mới vì nó cho thấy toàn bộ flow: bắt đầu loading, gọi API, set data, bắt lỗi và tắt loading.

Vì sao cần empty state?

Không có dữ liệu không nhất thiết là lỗi. Ví dụ user chưa lưu bài viết nào, chưa có thông báo mới, hoặc category hiện tại chưa có bài. Khi đó empty state giúp người dùng hiểu app vẫn hoạt động bình thường.

Đừng để màn hình trắng. Màn hình trắng làm người dùng tưởng app bị lỗi.

Retry khi lỗi

Với lỗi mạng, bạn nên cho người dùng thử lại. Khi code lớn hơn, hãy tách hàm loadArticles ra ngoài useEffect để có thể gọi lại từ nút Retry.

<Button title="Thử lại" onPress={loadArticles} />

Ở app thật, bạn cũng nên kiểm tra response.ok, xử lý mã lỗi server và cân nhắc timeout nếu cần.

Đưa dữ liệu vào FlatList

Sau khi có data, FlatList là nơi phù hợp để hiển thị danh sách. Hãy nhớ truyền key ổn định, tách item thành component riêng và chuẩn bị loading/empty/error state.

Lỗi thường gặp

Lỗi đầu tiên là chỉ code trường hợp thành công. Lỗi thứ hai là không tắt loading trong nhánh lỗi. Lỗi thứ ba là không có empty state. Lỗi thứ tư là gọi API lặp vô hạn vì dependency của useEffect sai. Lỗi thứ năm là cập nhật state sau khi màn hình đã rời đi trong các flow phức tạp.

Kết luận

Gọi API là bước biến app demo thành app có dữ liệu thật. Hãy luôn nghĩ theo bốn trạng thái: loading, error, empty và success. Khi UI xử lý đủ bốn trạng thái này, app sẽ dễ dùng hơn rất nhiều và người mới cũng debug dễ hơn.

Nguồn tham khảo: React Native: Networking, React: useEffect, React Native: FlatList.