Odpravljanje težav z napako ReactJS: »Nepričakovana napaka aplikacije« z useQuery in Axios

ReactJS – obravnava "nepričakovane napake aplikacije" v useQuery

Ta skript obravnava napako z uporabo ReactJS in @tanstack/react-query za dinamično pridobivanje podatkov. Za optimalno delovanje in varnost kode uporablja pravilno obravnavanje napak.

import React from 'react';
import Post from '../post/Post';
import './posts.scss';
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';
import { makeRequest } from '../../axios';
// Create a new Query Client instance
const queryClient = new QueryClient();
const Posts = () => {
  // Using useQuery to fetch posts data with proper error handling
  const { isLoading, error, data } = useQuery({
    queryKey: ['posts'],
    queryFn: () => makeRequest.get('/posts').then(res => res.data),
    onError: (err) => {
      console.error("Error fetching posts:", err);
    }
  });
  return (
    <div className="posts">
      {error ? (
        <p>Something went wrong: {error.message}</p>
      ) : isLoading ? (
        <p>Loading...</p>
      ) : (
        data?.map((post) => <Post post={post} key={post.id} />)
      )}
    </div>
  );
};
export default Posts;

Alternativna rešitev: uporaba nadomestnih komponent

Pri tem pristopu skript definira nadomestne komponente za boljšo uporabniško izkušnjo in dodatne informacije o napakah.

import React from 'react';
import Post from '../post/Post';
import './posts.scss';
import { useQuery } from '@tanstack/react-query';
import { makeRequest } from '../../axios';
// Fallback components
const Loading = () => <p>Loading...</p>;
const ErrorComponent = ({ error }) => (
  <p>Error: {error.message} - Please try again later.</p>
);
const Posts = () => {
  const { isLoading, error, data } = useQuery({
    queryKey: ['posts'],
    queryFn: async () => {
      const response = await makeRequest.get('/posts');
      return response.data;
    }
  });
  return (
    <div className="posts">
      {error ? (
        <ErrorComponent error={error} />
      ) : isLoading ? (
        <Loading />
      ) : (
        data?.map((post) => <Post post={post} key={post.id} />)
      )}
    </div>
  );
};
export default Posts;

Zaledni skript: nastavitev vzorčne končne točke Axios za testiranje

Ta skript uporablja Node.js in Express za nastavitev preskusne končne točke za pridobivanje podatkov o objavah.

const express = require('express');
const app = express();
// Sample data to simulate database posts
const posts = [
  { id: 1, title: 'Post One', content: 'Content for post one' },
  { id: 2, title: 'Post Two', content: 'Content for post two' }
];
app.get('/posts', (req, res) => {
  res.json(posts);
});
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log('Server running on port', PORT));

Preizkusi enote: preverjanje upodabljanja komponent in pridobivanja API-ja

Naslednji testi potrjujejo uspešnost upodabljanja komponent in API-ja Šala in React Testing Library.

import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import Posts from './Posts';
test('renders loading message initially', () => {
  render(<Posts />);
  expect(screen.getByText(/loading.../i)).toBeInTheDocument();
});
test('displays error message on fetch failure', async () => {
  render(<Posts />);
  expect(await screen.findByText(/something went wrong/i)).toBeInTheDocument();
});
test('displays posts data after successful fetch', async () => {
  render(<Posts />);
  expect(await screen.findByText(/Post One/i)).toBeInTheDocument();
});

Najpogostejša vprašanja o poizvedbah React in obravnavanju napak

1. Kaj počne useQuery narediti v Reactu?
2. The useQuery hook pridobiva, predpomni in posodablja asinhrone podatke v komponentah React, samodejno obravnava stanja nalaganja, napake in uspeha.
3. Zakaj React prikaže napako »Predmeti niso veljavni kot otrok React«?
4. Ta napaka se zgodi, ko je objekt posredovan neposredno kot podrejeni element. React zahteva besedilo, številke ali elemente React kot otroke, ne predmete.
5. Kako queryFn delo v React Query?
6. queryFn določa, kako se podatki pridobivajo useQuery. To je funkcija, ki je odgovorna za izdelavo zahtev API, kot je axios.get.
7. Zakaj uporabljati error.message za prikazovanje napak?
8. Uporaba error.message zagotavlja podrobna, uporabniku prijazna sporočila o napakah namesto nejasnih izjav, kot je "Nekaj ​​je šlo narobe," in pomaga pri odpravljanju težav.
9. Kakšna je vloga queryKey v React Query?
10. queryKey enolično identificira vsako poizvedbo, kar omogoča React Queryju, da predpomni rezultate in zmanjša nepotrebne omrežne zahteve.
11. Ali lahko drugače obravnavam napake v React Query?
12. Da, onError povratni klic v useQuery lahko prilagodite za obravnavo določenih vrst napak, kar olajša odpravljanje napak.
13. Kaj je onError uporabljeno za v useQuery?
14. onError v useQuery je povratni klic, ki se zažene, ko med poizvedbo pride do napake. Omogoča vam dinamično beleženje ali prikaz informacij o napakah.
15. Kako testiram komponente React Query?
16. Uporabite knjižnice, kot je Jest in React Testing Library za simulacijo odzivov API-ja in preverjanje, ali stanja nalaganja, napake in uspeha delujejo po pričakovanjih.
17. Zakaj naj uporabljam pogojno upodabljanje v Reactu?
18. Pogojno upodabljanje izboljša uporabniško izkušnjo s prikazom specifičnega uporabniškega vmesnika, ki temelji na stanjih nalaganja, napake ali uspeha, namesto da bi prikazal neobdelane podatke ali napake.
19. Kaj so rezervne komponente v Reactu?
20. Nadomestne komponente nudijo alternativni uporabniški vmesnik, kot so sporočila o napakah ali nalaganju, če glavne vsebine ni mogoče prikazati. Izboljšajo odpornost aplikacije in uporabniško izkušnjo.
21. Kako axios.get delo v primeru?
22. axios.get strežniku pošlje zahtevo HTTP GET za pridobitev podatkov. Tukaj pridobi podatke o objavah v formatu JSON za upodabljanje v komponenti.

Nasveti za odpravljanje napak za aplikacije React

Novi razvijalci v ReactJS lahko pridobijo zaupanje tako, da se naučijo odpravljati in reševati pogoste napake, kot so nepričakovane težave z aplikacijami. Rešitve, kot je uporaba React Query, pravilno oblikovanje odgovorov Axios in nastavitev natančnega obravnavanja napak, omogočajo izogibanje številnim pastem. Z izboljšanjem uporabniške izkušnje z informativnimi sporočili in uporabo nadomestnih komponent zagotovite bolj gladek proces razvoja.

Gradnja stabilnih aplikacij vključuje tudi sprejemanje strategij testiranja za preverjanje, ali se komponente v vseh pogojih obnašajo po pričakovanjih. Z orodji, kot sta Jest in React Testing Library, lahko razvijalci simulirajo omrežne odzive in preverijo, ali se aplikacija ustrezno odziva na uspehe in neuspehe. Ta pristop ne le krepi stabilnost, ampak tudi spodbuja boljše prakse kodiranja. 🚀