Przewodnik po pobieraniu i wyświetlaniu danych z API w React JS

Opublikowany: 2024-10-01

Pobieranie i wyświetlanie danych z API to podstawowe zadanie we współczesnych aplikacjach React. Wraz z ewolucją Reacta pobieranie danych stało się usprawnione i oferuje wiele metod wysyłania żądań HTTP. W tym przewodniku omówimy kroki pobierania i wyświetlania danych za pomocą React.

Spis treści

Dźwignia kolankowa

Konfigurowanie projektu React

Zanim zagłębisz się w pobieranie API, upewnij się, że masz skonfigurowany projekt React. Możesz go utworzyć za pomocą

  • npx create-react-app my-app
    cd my-app
    npm start

To inicjuje nowy projekt React i uruchamia serwer programistyczny.

️ Krok po kroku: Pobieranie danych w React

1. Utwórz stan do przechowywania danych

Użyj haka useState , aby utworzyć zmienną stanu do przechowywania pobranych danych.

JavaScript

  • const [data, setData] = useState([]);

2. Pobierz dane API za pomocą useEffect

Hak useEffect w React zapewnia, że ​​pobieranie danych nastąpi podczas montowania komponentu. Do pobrania danych z API służy funkcja fetch() .

JavaScript

  • useEffect(() => {
    fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setData(data))
    .catch(error => console.error('Error:', error));
    }, []);

3. Wyświetl pobrane dane

Po pobraniu danych można je wyrenderować w JSX za pomocą metody map() :

  • return (
    <div>
    <ul>
    {data.map(item => (
    <li key={item.id}>{item.name}</li>
    ))}
    </ul>
    </div>
    );

️ Używanie Axios do pobierania danych

Chociaż fetch() jest natywnym interfejsem API przeglądarki, wielu programistów woli używać bibliotek takich jak Axios ze względu na jego prostotę i zaawansowane funkcje. Oto przykład użycia Axios:

Zainstaluj Axios :

  • npm install axios

Pobieranie danych

  • useEffect(() => {
    axios.get('https://api.example.com/data')
    .then(response => setData(response.data))
    .catch(error => console.error('Error:', error));
    }, []);

‍ Obsługa spraw Edge

  • Stany ładowania : ważne jest zarządzanie stanem ładowania podczas pobierania danych.
  • Obsługa błędów : wdrożenie właściwej obsługi błędów może poprawić komfort użytkownika.

Przykład:

const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(error => {
setError(error);
setLoading(false);
});
}, []);

Wniosek

Pobieranie i wyświetlanie danych z API w React jest niezbędne do tworzenia dynamicznych aplikacji internetowych. Niezależnie od tego, czy używasz funkcji API fetch() , czy biblioteki takiej jak Axios, proces obejmuje zdefiniowanie stanu przechowywania danych, wysłanie żądania i wyświetlenie wyników. Rozumiejąc te kroki i radząc sobie z przypadkami brzegowymi, takimi jak ładowanie i błędy, możesz efektywnie tworzyć responsywne aplikacje oparte na danych.

Często zadawane pytania

1. Jak skonfigurować projekt React, aby rozpocząć pobieranie danych API?

Aby skonfigurować projekt React, uruchom następujące polecenia:

npx create-react-app my -app
cd my -app
npm start

Spowoduje to inicjowanie projektu i uruchomienie serwera programistycznego.

2. Jak przechowywać pobrane dane w React?

Możesz przechowywać pobrane dane za pomocą haka useState . Przykład:

const [data, setData] = useState ([]);

3. Jak mogę pobrać dane w React, gdy komponent się montuje?

Użyj haka useEffect do pobrania danych, gdy komponent jest zamontowany:

useEffect ( () => {
fetch ( 'https://api.example.com/data' )
. then ( response => response. json ())
. then ( data => setData (data))
. catch ( error => console . error ( 'Error:' , error));
}, []);

4. Jaki jest cel stosowania metody map() w React podczas renderowania danych?

Metoda map() służy do przeglądania pobranej tablicy danych i renderowania każdego elementu w formacie JSX. Na przykład:

<ul>
{data. map ( item => (
< li key = {item.id} > {item.name} </ li >
))}
</ul>

5. Dlaczego miałbym używać Axios zamiast API pobierania?

Wielu programistów woli Axios, ponieważ upraszcza żądania HTTP, oferuje więcej funkcji i bardziej spójnie obsługuje starsze przeglądarki.

6. Jak zainstalować Axios w moim projekcie React?

Aby zainstalować Axios, uruchom:

npm install axios

7. Jak pobrać dane za pomocą Axios w React?

Dzięki Axios możesz pobierać takie dane:

useEffect ( () => {
axios. get ( 'https://api.example.com/data' )
. then ( response => setData (response. data ))
. catch ( error => console . error ( 'Error:' , error));
}, []);

8. Jak mogę obsłużyć stany ładowania podczas pobierania danych w React?

Możesz zarządzać stanami ładowania, tworząc zmienną loading za pomocą useState . Na przykład:

const [loading, setLoading] = useState ( true );

useEffect ( () => {
pobierz ( 'https://api.example.com/data' )
. następnie ( odpowiedź => odpowiedź. json ())
. następnie ( dane => {
setData (dane);
setLoading ( fałsz );
});
}, []);

9. Jak sobie poradzić z błędami podczas pobierania danych?

Aby obsłużyć błędy, zdefiniuj stan error i zaktualizuj go w przypadku niepowodzenia żądania:

const [error, setError] = useState ( null );

useEffect ( () => {
pobierz ( 'https://api.example.com/data' )
. catch ( błąd => {
setError (błąd);
setLoading ( fałsz );
});
}, []);

10. Dlaczego ważne jest radzenie sobie z przypadkami brzegowymi, takimi jak ładowanie i błędy w pobieraniu API?

Obsługa przypadków brzegowych, takich jak ładowanie i błędy, zapewnia, że ​​użytkownicy są informowani o bieżącym stanie pobierania danych i zapewnia płynniejszą obsługę w przypadkach, gdy pobieranie danych nie powiedzie się lub zajmie dużo czasu.