Fejlfinding af ReactJS-fejl: "Uventet applikationsfejl" med useQuery og Axios

ReactJS - Håndtering af "Uventet applikationsfejl" i useQuery

Dette script håndterer fejlen vha ReactJS og @tanstack/react-query til dynamisk datahentning. Den anvender korrekt fejlhåndtering for optimal kodeydeevne og sikkerhed.

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;

Alternativ løsning: Brug af reservekomponenter

I denne tilgang definerer scriptet reservekomponenter for bedre brugeroplevelse og yderligere fejlinformation.

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;

Back-end Script: Opsætning af et prøve Axios-endepunkt til test

Dette script bruger Node.js og Express for at opsætte et testendepunkt til hentning af indlægsdata.

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

Enhedstest: Bekræftelse af komponentgengivelse og API-hentning

Følgende tests validerer komponentgengivelse og API-hentningssucces ved hjælp af Spøg og 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();
});

Top React Query & Error Handling FAQs

1. Hvad gør useQuery gøre i React?
2. De useQuery hook henter, cacher og opdaterer asynkrone data i React-komponenter og håndterer automatisk indlæsning, fejl og succestilstande.
3. Hvorfor viser React fejlen "Objekter er ikke gyldige som et React-barn"?
4. Denne fejl opstår, når et objekt sendes direkte som et underordnet element. React kræver tekst, tal eller React-elementer som børn, ikke objekter.
5. Hvordan gør queryFn arbejde i React Query?
6. queryFn angiver, hvordan data hentes ind useQuery. Det er funktionen, der er ansvarlig for at lave API-anmodninger, f.eks axios.get.
7. Hvorfor bruge error.message for at vise fejl?
8. Bruger error.message giver detaljerede, brugervenlige fejlmeddelelser snarere end vage udsagn som "Noget gik galt", og hjælper med fejlfinding.
9. Hvad er rollen queryKey i React Query?
10. queryKey identificerer hver forespørgsel unikt, hvilket gør det muligt for React Query at cache resultater og reducere unødvendige netværksanmodninger.
11. Kan jeg håndtere fejl anderledes i React Query?
12. Ja, den onError tilbagekald ind useQuery kan tilpasses til at håndtere specifikke fejltyper, hvilket gør fejlfinding lettere.
13. Hvad er onError bruges til i brugQuery?
14. onError i useQuery er et tilbagekald, der kører, når der opstår en fejl under forespørgslen. Det lader dig logge eller vise fejlinformation dynamisk.
15. Hvordan tester jeg React Query-komponenter?
16. Brug biblioteker som Jest og React Testing Library at simulere API-svar og kontrollere, om indlæsnings-, fejl- og succestilstande fungerer som forventet.
17. Hvorfor skal jeg bruge betinget gengivelse i React?
18. Betinget gengivelse forbedrer brugeroplevelsen ved at vise specifik brugergrænseflade baseret på indlæsnings-, fejl- eller succestilstande i stedet for at vise rå data eller fejl.
19. Hvad er reservekomponenter i React?
20. Reservekomponenter giver alternativ brugergrænseflade, såsom fejl- eller indlæsningsmeddelelser, hvis hovedindholdet ikke kan vises. De forbedrer appens modstandsdygtighed og brugeroplevelse.
21. Hvordan gør axios.get arbejde i eksemplet?
22. axios.get sender en HTTP GET-anmodning til serveren for at hente data. Her henter den postdata i JSON-format til gengivelse i komponenten.

Fejlhåndteringstips til React Apps

Nye udviklere i ReactJS kan opnå selvtillid ved at lære at fejlfinde og løse almindelige fejl som uventede applikationsproblemer. Løsninger såsom brug af React Query, korrekt formatering af Axios-svar og opsætning af præcis fejlhåndtering gør det muligt at undgå mange faldgruber. Ved at forbedre brugeroplevelsen med informative budskaber og bruge fallback-komponenter sikrer du en mere smidig udviklingsproces.

Opbygning af stabile applikationer involverer også vedtagelse af teststrategier for at validere, at komponenter opfører sig som forventet i enhver tilstand. Med værktøjer som Jest og React Testing Library kan udviklere simulere netværkssvar og verificere, at appen reagerer korrekt på både succeser og fiaskoer. Denne tilgang styrker ikke kun stabiliteten, men fremmer også bedre kodningspraksis. 🚀