Problemen oplossen ReactJS-fout: "Onverwachte toepassingsfout" met useQuery en Axios

ReactJS - Afhandeling van "onverwachte applicatiefouten" in useQuery

Dit script handelt de fout af met behulp van ReageerJS En @tanstack/react-query voor het dynamisch ophalen van gegevens. Het maakt gebruik van de juiste foutafhandeling voor optimale codeprestaties en beveiliging.

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;

Alternatieve oplossing: Fallback-componenten gebruiken

Bij deze aanpak definieert het script reservecomponenten voor een betere gebruikerservaring en aanvullende foutinformatie.

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-endscript: een voorbeeld van een Axios-eindpunt instellen voor testen

Dit script gebruikt Knooppunt.js En Nadrukkelijk om een ​​testeindpunt in te stellen voor het ophalen van berichtgegevens.

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

Eenheidstests: het verifiëren van componentweergave en API-ophalen

De volgende tests valideren het renderen van componenten en het ophalen van API-successen met behulp van Grap En Reageertestbibliotheek.

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 Veelgestelde vragen over React-query's en foutafhandeling

1. Wat doet useQuery doen in Reageren?
2. De useQuery hook haalt, cachet en werkt asynchrone gegevens bij in de React-component, waarbij de laad-, fout- en successtatussen automatisch worden afgehandeld.
3. Waarom geeft React de foutmelding 'Objecten zijn niet geldig als React-kind' weer?
4. Deze fout treedt op wanneer een object rechtstreeks als onderliggend element wordt doorgegeven. React vereist tekst, cijfers of React-elementen als onderliggende elementen, geen objecten.
5. Hoe werkt queryFn werken in React Query?
6. queryFn specificeert hoe gegevens worden opgehaald useQuery. Het is de functie die verantwoordelijk is voor het doen van API-verzoeken, zoals axios.get.
7. Waarom gebruiken error.message voor het weergeven van fouten?
8. Gebruiken error.message biedt gedetailleerde, gebruiksvriendelijke foutmeldingen in plaats van vage uitspraken als 'Er is iets misgegaan', wat helpt bij het oplossen van problemen.
9. Wat is de rol van queryKey in Reageerquery?
10. queryKey identificeert elke zoekopdracht op unieke wijze, waardoor React Query resultaten in de cache kan opslaan en onnodige netwerkverzoeken kan verminderen.
11. Kan ik fouten anders afhandelen in React Query?
12. Ja, de onError terugbellen useQuery kan worden aangepast om specifieke fouttypen te verwerken, waardoor foutopsporing eenvoudiger wordt.
13. Wat is onError gebruikt voor in useQuery?
14. onError in useQuery is een callback die wordt uitgevoerd wanneer er een fout optreedt tijdens de query. Hiermee kunt u foutinformatie dynamisch registreren of weergeven.
15. Hoe test ik React Query-componenten?
16. Gebruik bibliotheken zoals Jest En React Testing Library om API-reacties te simuleren en te controleren of de laad-, fout- en successtatussen werken zoals verwacht.
17. Waarom zou ik voorwaardelijke weergave gebruiken in React?
18. Voorwaardelijke weergave verbetert de gebruikerservaring door een specifieke gebruikersinterface weer te geven op basis van laad-, fout- of successtatussen in plaats van onbewerkte gegevens of fouten weer te geven.
19. Wat zijn fallback-componenten in React?
20. Fallback-componenten bieden een alternatieve gebruikersinterface, zoals fout- of laadberichten, als de hoofdinhoud niet kan worden weergegeven. Ze verbeteren de veerkracht van de app en de gebruikerservaring.
21. Hoe werkt axios.get werken in het voorbeeld?
22. axios.get stuurt een HTTP GET-verzoek naar de server om gegevens op te halen. Hier haalt het berichtengegevens op in JSON-indeling voor weergave in de component.

Tips voor foutafhandeling voor React-apps

Nieuwe ontwikkelaars binnen ReageerJS kan vertrouwen winnen door te leren problemen op te lossen en op te lossen, zoals onverwachte applicatieproblemen. Oplossingen zoals het gebruik van React Query, het correct opmaken van Axios-reacties en het opzetten van nauwkeurige foutafhandeling maken het mogelijk om veel valkuilen te vermijden. Door de gebruikerservaring te verbeteren met informatieve berichten en gebruik te maken van fallback-componenten, zorg je voor een soepeler ontwikkelproces.

Het bouwen van stabiele applicaties omvat ook het toepassen van teststrategieën om te valideren dat componenten zich onder alle omstandigheden gedragen zoals verwacht. Met tools als Jest en React Testing Library kunnen ontwikkelaars netwerkreacties simuleren en verifiëren dat de app op de juiste manier reageert op zowel successen als mislukkingen. Deze aanpak versterkt niet alleen de stabiliteit, maar bevordert ook betere codeerpraktijken. 🚀