A ReactJS hiba hibaelhárítása: "Váratlan alkalmazáshiba" a useQuery és az Axios használatával

ReactJS – „Váratlan alkalmazáshiba” kezelése a useQuery-ben

Ez a szkript kezeli a hibát a használatával ReactJS és @tanstack/react-query dinamikus adatlekéréshez. Megfelelő hibakezelést alkalmaz az optimális kódteljesítmény és biztonság érdekében.

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;

Alternatív megoldás: tartalék alkatrészek használata

Ebben a megközelítésben a szkript tartalék összetevőket határoz meg a jobb felhasználói élmény és a további hibainformációk érdekében.

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;

Háttér szkript: Minta Axios végpont beállítása tesztelésre

Ez a szkript használ Node.js és Expressz tesztvégpont beállításához a bejegyzések adatainak lekéréséhez.

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));

Egységtesztek: A komponensek megjelenítésének és az API lekérésének ellenőrzése

A következő tesztek érvényesítik az összetevők megjelenítését és az API-lekérés sikerességét a használatával Tréfa és 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();
});

A leggyakrabban reagáló lekérdezések és hibakezelési GYIK

1. Mit tesz useQuery csináld a Reactban?
2. A useQuery hook lekéri, gyorsítótárazza és frissíti az aszinkron adatokat a React összetevőkben, automatikusan kezelve a betöltési, hiba- és sikerállapotokat.
3. Miért jelenít meg a React "Az objektumok nem érvényesek React gyermekként" hibát?
4. Ez a hiba akkor fordul elő, ha egy objektum közvetlenül gyermekelemként kerül átadásra. A Reacthoz szövegre, számokra vagy React elemekre van szükség gyermekként, nem objektumként.
5. Hogyan queryFn dolgozik a React Queryben?
6. queryFn meghatározza az adatok beolvasásának módját useQuery. Ez az API-kérésekért felelős funkció, mint pl axios.get.
7. Miért használja error.message hibák megjelenítésére?
8. Használata error.message részletes, felhasználóbarát hibaüzeneteket ad, nem pedig homályos kijelentéseket, mint például: „Valami elromlott”, segíti a hibaelhárítást.
9. Mi a szerepe queryKey a React Queryben?
10. queryKey egyedileg azonosítja az egyes lekérdezéseket, lehetővé téve a React Query számára az eredmények gyorsítótárazását és a szükségtelen hálózati kérések csökkentését.
11. Másképpen kezelhetem a hibákat a React Queryben?
12. Igen, a onError visszahívás useQuery testreszabható bizonyos hibatípusok kezelésére, így könnyebbé válik a hibakeresés.
13. Mi az onError a useQuery-ben használt?
14. onError be useQuery egy visszahívás, amely akkor fut le, ha hiba történik a lekérdezés során. Lehetővé teszi a hibainformációk dinamikus naplózását vagy megjelenítését.
15. Hogyan tesztelhetem a React Query összetevőit?
16. Használj olyan könyvtárakat, mint pl Jest és React Testing Library az API-válaszok szimulálásához és annak ellenőrzéséhez, hogy a betöltési, hiba- és sikerállapotok a várt módon működnek-e.
17. Miért érdemes feltételes megjelenítést használni a Reactban?
18. A feltételes megjelenítés javítja a felhasználói élményt azáltal, hogy a nyers adatok vagy hibák helyett konkrét felhasználói felületet jelenít meg a betöltés, a hiba vagy a sikeres állapot alapján.
19. Melyek a React tartalék összetevői?
20. A tartalék összetevők alternatív felhasználói felületet biztosítanak, például hibaüzeneteket vagy betöltési üzeneteket, ha a fő tartalom nem jeleníthető meg. Javítják az alkalmazások ellenálló képességét és a felhasználói élményt.
21. Hogyan axios.get működik a példában?
22. axios.get HTTP GET kérést küld a szervernek az adatok lekérésére. Itt JSON formátumban kéri le a bejegyzésadatokat az összetevőben való megjelenítéshez.

Hibakezelési tippek a React alkalmazásokhoz

Új fejlesztők jelennek meg ReactJS önbizalmat szerezhet, ha megtanulja megoldani a gyakori hibákat, például a váratlan alkalmazási problémákat. Az olyan megoldások, mint a React Query, az Axios válaszok megfelelő formázása és a pontos hibakezelés beállítása lehetővé teszik számos buktató elkerülését. A felhasználói élmény tájékoztató üzenetekkel történő javításával és a tartalék komponensek használatával zökkenőmentesebb fejlesztési folyamatot biztosít.

A stabil alkalmazások felépítése magában foglalja a tesztelési stratégiák elfogadását is annak ellenőrzésére, hogy az összetevők bármilyen körülmények között a várt módon viselkednek-e. Az olyan eszközökkel, mint a Jest és a React Testing Library, a fejlesztők szimulálhatják a hálózati válaszokat, és ellenőrizhetik, hogy az alkalmazás megfelelően reagál-e mind a sikerekre, mind a kudarcokra. Ez a megközelítés nemcsak a stabilitást erősíti, hanem a jobb kódolási gyakorlatokat is elősegíti. 🚀