React: Kā iegūt nejaušu lietotāju datus no citas aplikācijas (fetching user data)

Šajā rakstā un videoklipā es jums parādīšu, kā iegūt nejaušus lietotāja datus no citas vietnes. Es izmantošu vietni random.me, lai piekļūtu nejaušiem lietotāja datiem šajā demonstrācijā. Esmu sagatavojis kodu šai lietotnei, lai iegūtu lietotāja datus no vietnes. Ja es izpildīšu šo kodu, tas sākotnēji izvadīs datu neapstiprinātos tekstus H1 virsrakstā. Tajā pašā laikā fonā tas veiks datu iegūšanas funkciju, lai izgūtu lietotāja informāciju no nejaušās lietotāja vietnes. Kad dati ir veiksmīgi izgūti, tas atjaunina skatu ar atgriezto datu H1 virsrakstu un izgūto lietotāja informāciju. Šajā piemērā pieprasītie dati bija šī nejaušā lietotāja vārds, uzvārds un e-pasts. Apskatīsim šo kodu sīkāk.

import React from "react";


function App() {
  const [user, setUser] = React.useState([]);


  const fetchData = () => {
    fetch("https://randomuser.me/api/?results=1")
    .then(response => response.json())
    .then(data => setUser(data));
  }
  React.useEffect(() => {
    fetchData();
  }, []);
  return  Object.keys(user).length > 0 ? (
    <div>
      <h1>Saņemtie dati</h1>
      <h2>Vārds: {user.results[0].name.first}</h2>
      <h2>Uzvārds: {user.results[0].name.last}</h2>
      <h2>Ē-pasts: {user.results[0].email}</h2>
    </div>
  ) : (
    <h1>Saņemu datus ...</h1>
  );
}


export default App;

Tātad, pirmkārt, man ir lietotnes funkcija, un tās iekšpusē, ievērojot āķa noteikumus, es izsaucu useState āķi komponenta augšējā līmenī. Steita mainīgā sākotnējā vērtība ir tukšs masīvs. Pēc tam esmu definējis funkciju izgūt datus, kas ienes datus no random user.name API, pēc tam tā izgūst atbildi no API JSON formātā. Pēc tam tas atjaunina steita mainīgo ar šiem JSON datiem.

Iespējams, pamanīsiet, ka es neizmantoju āķi datu ielādes funkcijā, jo tas ir pretrunā ar āķu lietošanas noteikumiem. Pēc tam es izsaucu useEffect hook un no iekšpuses viņi izmanto efektu hook, es izsaucu funkciju fetch data, ko esmu definējis iepriekš. Visbeidzot, es izmantoju nosacījumu loģiku, lai izlemtu, ko atgriezt. Pirmkārt, es izmantoju koda fragmentu object.keys, lai visas lietotāja objekta atslēgas ievietotu masīvā. Tā kā objekts.keys atgriež masīvu, es varu piekļūt šī masīva rekvizīta garumam un pārbaudīt, vai šī masīva garums ir lielāks par nulli. Ja tā ir, tas nozīmē, ka steita masīva saturs ir mainījies, jo, kā jūs atceraties, steita mainīgo masīvs bija tukšs. Tātad, ja masīvs vairs nav tukšs, sadaļa div tiks atgriezta ar H1 tagu un pāris H2 tagiem. Pretējā gadījumā tiek atgriezts tālāk esošais H1 tags, kas nolasa neapstiprinātos datus. Dažreiz var paiet nedaudz laika, līdz funkcijai iegūt datus, lai izgūtu pieprasītos datus. Tāpēc ziņojums par datu gaidīšanu tiks parādīts sākotnēji pēc koda izpildes. Kad dati ir saņemti no datu ielādes iezvanes, šīs steita izmaiņas izraisa mana komponenta atkārtotu renderēšanu. Tādējādi atgriešanas paziņojumu trīskāršais operators tiek atkārtoti novērtēts, un tas atgriež visus datus no mana izsaukuma uz ielādes API. Tas būtībā ir veids, kā iegūt datus no tīmekļa, izmantojot React.

VIDEO:

Šajā videoklipā jūs uzzinājāt, kā iegūt datus, izmantojot steitu un efektu āķi.