Ghid pentru preluarea și afișarea datelor din API în React JS

Publicat: 2024-10-01

Preluarea și afișarea datelor dintr-un API este o sarcină fundamentală în aplicațiile React moderne. Odată cu evoluția React, preluarea datelor a devenit mai eficientă și oferă mai multe metode de a face solicitări HTTP. În acest ghid, vom acoperi pașii pentru preluarea și afișarea datelor folosind React.

Cuprins

Comutați

Configurarea proiectului React

Înainte de a vă scufunda în preluarea API, asigurați-vă că aveți un proiect React configurat. Puteți crea unul folosind

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

Aceasta inițializează un nou proiect React și rulează un server de dezvoltare.

️ Pas cu pas: Preluarea datelor în React

1. Creați stare pentru stocarea datelor

Utilizați cârligul useState pentru a crea o variabilă de stare pentru a stoca datele preluate.

javascript

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

2. Preluați datele API cu useEffect

Cârligul useEffect de la React asigură că preluarea datelor are loc atunci când componenta se montează. Funcția fetch() este utilizată pentru a prelua date din API.

javascript

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

3. Afișați datele preluate

Odată ce datele sunt preluate, acestea pot fi redate în JSX folosind metoda map() :

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

️ Utilizarea Axios pentru preluarea datelor

Deși fetch() este API-ul nativ al browserului, mulți dezvoltatori preferă să folosească biblioteci precum Axios datorită simplității și caracteristicilor sale puternice. Iată un exemplu de utilizare a Axios:

Instalați Axios :

  • npm install axios

Preluarea datelor

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

Manipularea cazurilor Edge

  • Statele de încărcare : Este important să gestionați o stare de încărcare în timp ce datele sunt preluate.
  • Gestionarea erorilor : implementarea unei gestionări adecvate a erorilor poate îmbunătăți experiența utilizatorului.

Exemplu:

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);
});
}, []);

Concluzie

Preluarea și afișarea datelor din API-uri în React este esențială pentru crearea de aplicații web dinamice. Indiferent dacă se utilizează API-ul fetch() sau o bibliotecă precum Axios, procesul implică definirea unei stări pentru stocarea datelor, efectuarea cererii și redarea rezultatelor. Înțelegând acești pași și gestionând cazurile marginale, cum ar fi încărcarea și erorile, puteți crea aplicații receptive, bazate pe date, în mod eficient.

Întrebări frecvente

1. Cum configurez un proiect React pentru a începe preluarea datelor API?

Pentru a configura un proiect React, executați următoarele comenzi:

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

Aceasta inițializează proiectul și pornește un server de dezvoltare.

2. Cum stochez datele preluate în React?

Puteți stoca datele preluate folosind cârligul useState . Exemplu:

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

3. Cum pot prelua date în React când se montează componenta?

Utilizați cârligul useEffect pentru a prelua date atunci când componenta este montată:

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

4. Care este scopul utilizării metodei map() în React la randarea datelor?

Metoda map() este folosită pentru a parcurge matricea de date preluate și pentru a reda fiecare element din JSX. De exemplu:

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

5. De ce aș folosi Axios în loc de API-ul de preluare?

Mulți dezvoltatori preferă Axios deoarece simplifică cererile HTTP, oferă mai multe funcții și acceptă browserele mai vechi în mod mai consistent.

6. Cum instalez Axios în proiectul meu React?

Pentru a instala Axios, rulați:

npm install axios

7. Cum preiau date folosind Axios în React?

Cu Axios, puteți prelua date astfel:

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

8. Cum pot gestiona stările de încărcare când preiau date în React?

Puteți gestiona stările de încărcare creând o variabilă loading cu useState . De exemplu:

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

useEffect ( () => {
preluați ( „https://api.example.com/data” )
. apoi ( răspuns => răspuns. json ())
. apoi ( date => {
setData (date);
setLoading ( fals );
});
}, []);

9. Cum gestionez erorile la preluarea datelor?

Pentru a gestiona erorile, definiți o stare error și actualizați-o în cazul în care cererea eșuează:

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

useEffect ( () => {
preluați ( „https://api.example.com/data” )
. catch ( eroare => {
setError (eroare);
setLoading ( fals );
});
}, []);

10. De ce este important să gestionăm cazurile marginale, cum ar fi încărcarea și erorile în preluarea API?

Gestionarea cazurilor marginale, cum ar fi încărcarea și erorile, asigură că utilizatorii sunt informați despre starea actuală a preluării datelor și oferă o experiență mai fluidă pentru utilizator în cazurile în care recuperarea datelor eșuează sau necesită timp.