Felsökning av ReactJS-fel: "Oväntat applikationsfel" med useQuery och Axios

ReactJS - Hanterar "Oväntat applikationsfel" i useQuery

Detta skript hanterar felet med hjälp av ReactJS och @tanstack/react-query för dynamisk datahämtning. Den använder korrekt felhantering för optimal kodprestanda och säkerhet.

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: Använd reservkomponenter

I detta tillvägagångssätt definierar skriptet reservkomponenter för bättre användarupplevelse och ytterligare felinformation.

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-skript: Konfigurera ett exempel på Axios-ändpunkt för testning

Detta skript använder Node.js och Uttrycka för att ställa in en testslutpunkt för att hämta inläggsdata.

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

Enhetstester: Verifiering av komponentrendering och API-hämtning

Följande tester validerar komponentrendering och API-hämtningsframgång med hjälp av Skoj och 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 Management FAQs

1. Vad gör useQuery göra i React?
2. De useQuery Hook hämtar, cachar och uppdaterar asynkron data i React-komponenter, och hanterar automatiskt laddnings-, fel- och framgångstillstånd.
3. Varför visar React felet "Objekt är inte giltiga som ett React-barn"?
4. Detta fel inträffar när ett objekt skickas direkt som ett underordnat element. React kräver text, siffror eller React-element som underordnade, inte objekt.
5. Hur gör queryFn arbeta i React Query?
6. queryFn anger hur data hämtas in useQuery. Det är funktionen som ansvarar för att göra API-förfrågningar, som axios.get.
7. Varför använda error.message för att visa fel?
8. Använder error.message ger detaljerade, användarvänliga felmeddelanden snarare än vaga uttalanden som "Något gick fel", som hjälper till med felsökning.
9. Vad är rollen för queryKey i React Query?
10. queryKey identifierar varje fråga unikt, vilket gör att React Query kan cacheresultat och minska onödiga nätverksförfrågningar.
11. Kan jag hantera fel på olika sätt i React Query?
12. Ja, den onError ring tillbaka in useQuery kan anpassas för att hantera specifika feltyper, vilket gör felsökningen enklare.
13. Vad är onError används för in useQuery?
14. onError i useQuery är en återuppringning som körs när ett fel inträffar under frågan. Det låter dig logga eller visa felinformation dynamiskt.
15. Hur testar jag React Query-komponenter?
16. Använd bibliotek som Jest och React Testing Library för att simulera API-svar och kontrollera om laddnings-, fel- och framgångstillstånd fungerar som förväntat.
17. Varför ska jag använda villkorlig rendering i React?
18. Villkorlig rendering förbättrar användarupplevelsen genom att visa specifika användargränssnitt baserat på laddnings-, fel- eller framgångstillstånd snarare än att visa rådata eller fel.
19. Vad är reservkomponenter i React?
20. Reservkomponenter tillhandahåller alternativa gränssnitt, som felmeddelanden eller laddningsmeddelanden, om huvudinnehållet inte kan visas. De förbättrar appens motståndskraft och användarupplevelse.
21. Hur gör axios.get fungerar i exemplet?
22. axios.get skickar en HTTP GET-begäran till servern för att hämta data. Här hämtar den inläggsdata i JSON-format för rendering i komponenten.

Tips för felhantering för React-appar

Nya utvecklare i ReactJS kan få förtroende genom att lära sig att felsöka och lösa vanliga fel som oväntade programproblem. Lösningar som att använda React Query, korrekt formatering av Axios-svar och att ställa in korrekt felhantering gör det möjligt att undvika många fallgropar. Genom att förbättra användarupplevelsen med informativa meddelanden och använda reservkomponenter säkerställer du en smidigare utvecklingsprocess.

Att bygga stabila applikationer innebär också att man antar teststrategier för att validera att komponenter beter sig som förväntat i alla tillstånd. Med verktyg som Jest och React Testing Library kan utvecklare simulera nätverkssvar och verifiera att appen reagerar korrekt på både framgångar och misslyckanden. Detta tillvägagångssätt stärker inte bara stabiliteten utan främjar också bättre kodningsmetoder. 🚀