React Native Academy · Oppitunti

Lataus- ja virhetilojen käsittely

Lisätkää isLoading- ja error-tilamuuttujat, näyttäkää ActivityIndicator datan latautuessa ja esittäkää käyttäjäystävällinen virheilmoitus pyynnön epäonnistuessa.

Oppitunti 3/413 vaihetta

Lataus- ja virhetilojen käsittely on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Asynkronisten tietojen kolme tilaa

Jokaisella asynkronisella tietotoiminnolla on kolme mahdollista tilaa: loading (pyyntö on käynnissä), success (tiedot ovat saatavilla) ja error (pyyntö epäonnistui). Hyvin toteutettu React Native -näyttö käsittelee kaikki kolme tilaa nimenomaisesti ja näyttää kullekin sopivan käyttöliittymän. Minkä tahansa tilan sivuuttaminen voi johtaa tyhjään näyttöön, sovelluksen kaatumiseen tai käyttäjää hämmentävään kokemukseen.

Lataus- ja virhetilan muuttujien määrittäminen

Lisää isLoading- ja error-tilamuuttujat tietoja sisältävän tilan rinnalle. Alusta isLoading arvoksi true, koska komponentti aloittaa lataustilassa ennen tietojen hakemista. Alusta error arvoksi null, jotta arvo on epätosi silloin, kun virhettä ei ole.

const [posts, setPosts] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);

Tilojen asettaminen haun aikana

Nollaa virhetila hakulogiikan jokaisen yrityksen alussa, jotta uusi yritys poistaa aiemman virheen, aseta tiedot onnistuneen haun jälkeen, aseta virhe epäonnistumisen yhteydessä ja aseta isLoading aina arvoon false finally-lohkossa, jotta latausilmaisin pysähtyy lopputuloksesta riippumatta.

const fetchData = async () => {
  setIsLoading(true);
  setError(null);
  try {
    const response = await axios.get('/posts');
    setPosts(response.data);
  } catch (err) {
    setError(err.message || 'Something went wrong');
  } finally {
    setIsLoading(false);
  }
};

ActivityIndicatorin näyttäminen latauksen aikana

Palauta ActivityIndicator, kun isLoading on true. Keskitä se näytölle flex-säilön avulla. React Nativen ActivityIndicator käyttää alustan omaa latausilmaisinta ja noudattaa automaattisesti iOS:n ja Androidin suunnittelukäytäntöjä.

if (isLoading) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <ActivityIndicator size='large' color='#6200ee' />
      <Text style={{ marginTop: 12, color: '#666' }}>Loading...</Text>
    </View>
  );
}

Käyttäjäystävällisen virheilmoituksen näyttäminen

Kun error ei ole null, renderöi virhenäyttö, jossa on selkeä viesti ja uudelleenyrityspainike. Älä näytä käyttäjille raakoja virheobjekteja, vaan näytä niiden sijaan helposti ymmärrettävä viesti. Uudelleenyrityspainike kutsuu hakufunktiota uudelleen, nollaa virheen ja aloittaa uuden latausjakson.

if (error) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <Text style={{ fontSize: 18, marginBottom: 8 }}>Oops!</Text>
      <Text style={{ color: '#666', textAlign: 'center', marginBottom: 24 }}>
        {error}
      </Text>
      <Button title='Try Again' onPress={fetchData} />
    </View>
  );
}

Täydellinen komponentti kaikilla kolmella tilalla

Koosta täydellinen komponentti: palauta latausnäkymä latauksen aikana, virhenäkymä virheen ilmetessä ja muussa tapauksessa tietonäkymä. Tämä malli — latauksen ja virheen käsittely aikaisilla palautuksilla ja pääsisältö niiden jälkeen — pitää JSX-koodin selkeänä ja helposti luettavana.

export default function PostsScreen() {
  const [posts, setPosts] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => { fetchData(); }, []);

  if (isLoading) return <LoadingView />;
  if (error) return <ErrorView message={error} onRetry={fetchData} />;

  return <FlatList data={posts} renderItem={renderItem} keyExtractor={(p) => String(p.id)} />;
}

Verkko- ja HTTP-virheiden erottaminen

Axios heittää virheen sekä verkkoyhteyden epäonnistuessa (ei internet-yhteyttä, aikakatkaisu) että HTTP-virheissä (4xx, 5xx). Tarkista error.response erottaaksesi nämä tilanteet. Jos error.response on olemassa, palvelin vastasi virhetilakoodilla. Jos arvo on undefined, pyyntö ei koskaan saavuttanut palvelinta (kyseessä on verkkovirhe tai aikakatkaisu).

} catch (err) {
  if (err.response) {
    // Server responded with 4xx/5xx
    const status = err.response.status;
    if (status === 404) setError('Content not found');
    else if (status === 401) setError('Please log in again');
    else setError('Server error: ' + status);
  } else {
    // No response — network/timeout issue
    setError('Network error. Check your connection.');
  }
}

Lomakkeiden sisäisten virheiden näyttäminen

Näytä lomakkeen lähetyksen yhteydessä virheviesti sisällön yhteydessä lähetyspainikkeen lähellä sen sijaan, että korvaisit koko näytön. Näin käyttäjät voivat korjata syötteensä siirtymättä pois näkymästä. Käytä lähetyspainikkeen alla olevaa pientä punaista Text-komponenttia virheviestin näyttämiseen ja tyhjennä viesti, kun käyttäjä muuttaa mitä tahansa kenttää.

function LoginForm() {
  const [apiError, setApiError] = useState(null);

  const handleSubmit = async () => {
    setApiError(null);
    try {
      await login(email, password);
    } catch (err) {
      setApiError('Invalid email or password');
    }
  };

  return (
    <View>
      {/* inputs here */}
      {apiError && <Text style={{ color: 'red' }}>{apiError}</Text>}
      <Button title='Sign In' onPress={handleSubmit} />
    </View>
  );
}

Painiketoimintojen lataustila

Kun toiminto kestää jonkin aikaa, kuten lomakkeen lähettäminen tai kohteen poistaminen, näytä latausilmaisin painikkeen sisällä ja poista painike käytöstä toiminnon ajaksi. Näin estät päällekkäiset lähetykset ja annat käyttäjälle heti palautetta toiminnon käsittelystä.

function SubmitButton({ onPress }) {
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handlePress = async () => {
    setIsSubmitting(true);
    await onPress();
    setIsSubmitting(false);
  };

  return (
    <TouchableOpacity
      onPress={handlePress}
      disabled={isSubmitting}
      style={[styles.button, isSubmitting && styles.disabledButton]}
    >
      {isSubmitting
        ? <ActivityIndicator color='#fff' />
        : <Text style={styles.buttonText}>Submit</Text>}
    </TouchableOpacity>
  );
}

Luurankolatausnäytöt

Harkitse koko näytön latausilmaisimen sijaan skeleton screen -näyttöä eli paikkamerkkimuotoja, jotka jäljittelevät todellisen sisällön asettelua. Tämä Facebookin, LinkedInin ja YouTuben käyttämä malli parantaa koettua suorituskykyä, koska käyttäjät näkevät sisällön rakenteen heti, vaikka tiedot eivät olisi vielä latautuneet.

function SkeletonRow() {
  return (
    <View style={styles.skeletonRow}>
      <View style={styles.skeletonAvatar} />
      <View style={{ flex: 1 }}>
        <View style={styles.skeletonLine} />
        <View style={[styles.skeletonLine, { width: '60%' }]} />
      </View>
    </View>
  );
}

if (isLoading) return <FlatList data={[1,2,3,4,5]} renderItem={() => <SkeletonRow />} keyExtractor={(i) => String(i)} />;

Toastit ja snackbarit ei-kriittisille virheille

Kaikki virheet eivät edellytä kokonaista virhenäyttöä. Käytä ohimeneviin virheisiin, joista käyttäjä voi palautua, kuten epäonnistuneeseen taustapäivitykseen, toast-ilmoitusta tai snackbar-ilmoitusta, joka näkyy hetken aikaa näytön alareunassa. Kirjastot, kuten react-native-toast-message, tarjoavat valmiita toast-komponentteja React Nativeen.

import Toast from 'react-native-toast-message';

// On a background refresh failure:
Toast.show({
  type: 'error',
  text1: 'Could not refresh',
  text2: 'Showing cached data',
  visibilityTime: 3000,
});

Pikatarkistus

Testaa, miten hyvin ymmärrät lataus- ja virhetilojen käsittelyn tämän oppitunnin perusteella.

Vastaa interaktiivisessa oppitunnissa

Oppitunnin yhteenveto

Tässä oppitunnissa opit, että isLoading ja error kannattaa pitää erillisinä tilamuuttujina tietojen rinnalla, ActivityIndicator sopii koko näytön lataukseen ja lomakkeiden virheisiin sisäinen virheteksti ja setIsLoading(false) tulee aina kutsua finally-lohkossa, jotta latausilmaisin pysähtyy kaikissa tilanteissa. Seuraavaksi käsittelemme POST-, PUT- ja DELETE-pyyntöjä Axiosilla.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 30
Oppitunnit: 120

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Lataus- ja virhetilojen käsittely” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “Lataus- ja virhetilojen käsittely”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Lataus- ja virhetilojen käsittely”?

Lisätkää isLoading- ja error-tilamuuttujat, näyttäkää ActivityIndicator datan latautuessa ja esittäkää käyttäjäystävällinen virheilmoitus pyynnön epäonnistuessa. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Lataus- ja virhetilojen käsittely”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?

Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: React Native Academy