Resolució de problemes d'error ReactJS: "Error d'aplicació inesperat" amb useQuery i Axios

ReactJS - Gestió de "Error d'aplicació inesperat" a useQuery

Aquest script gestiona l'error utilitzant ReactJS i @tanstack/react-query per obtenir dades dinàmiques. Utilitza un tractament adequat d'errors per a un rendiment i seguretat òptims del codi.

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;

Solució alternativa: Ús de components de reserva

En aquest enfocament, l'script defineix components alternatius per a una millor experiència d'usuari i informació addicional sobre errors.

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;

Script de fons: Configuració d'un punt final d'Axios de mostra per fer proves

Aquest script utilitza Node.js i Expressar per configurar un punt final de prova per obtenir dades de publicacions.

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

Proves unitàries: verificació de la representació de components i la recuperació de l'API

Les proves següents validen la representació dels components i l'èxit de la recuperació de l'API Broma i Biblioteca de proves de React.

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

Preguntes més freqüents sobre consultes i tractament d'errors de React

1. Què fa useQuery fer a React?
2. El useQuery enganxa les recuperacions, la memòria cau i les actualitzacions de dades asíncrones als components de React, gestionant automàticament els estats de càrrega, error i èxit.
3. Per què React mostra l'error "Els objectes no són vàlids com a fill de React"?
4. Aquest error passa quan un objecte es passa directament com a element fill. React requereix text, números o elements de React com a fills, no objectes.
5. Com ho fa queryFn treballar a React Query?
6. queryFn especifica com s'obtenen les dades useQuery. És la funció responsable de fer sol·licituds d'API, com ara axios.get.
7. Per què utilitzar error.message per mostrar errors?
8. Utilitzant error.message proporciona missatges d'error detallats i fàcils d'utilitzar en lloc de declaracions vagues com "Alguna cosa ha anat malament", ajudant a solucionar problemes.
9. Quin és el paper de queryKey a React Query?
10. queryKey identifica de manera única cada consulta, permetent a React Query guardar els resultats a la memòria cau i reduir les sol·licituds de xarxa innecessàries.
11. Puc gestionar els errors de manera diferent a React Query?
12. Sí, el onError devolució de trucada useQuery es pot personalitzar per gestionar tipus d'error específics, facilitant la depuració.
13. Què és onError utilitzat per a useQuery?
14. onError en useQuery és una devolució de trucada que s'executa quan es produeix un error durant la consulta. Us permet registrar o mostrar informació d'error de manera dinàmica.
15. Com puc provar els components de React Query?
16. Utilitzeu biblioteques com Jest i React Testing Library per simular les respostes de l'API i comprovar si els estats de càrrega, error i èxit funcionen com s'esperava.
17. Per què hauria d'utilitzar la representació condicional a React?
18. La representació condicional millora l'experiència de l'usuari en mostrar una interfície d'usuari específica basada en els estats de càrrega, error o èxit en lloc de mostrar dades o errors en brut.
19. Quins són els components de reserva a React?
20. Els components de reserva ofereixen una interfície d'usuari alternativa, com ara missatges d'error o de càrrega, si el contingut principal no es pot mostrar. Milloren la resiliència de l'aplicació i l'experiència de l'usuari.
21. Com ho fa axios.get treballar en l'exemple?
22. axios.get envia una sol·licitud HTTP GET al servidor per recuperar dades. Aquí, obté dades de publicacions en format JSON per a la representació al component.

Consells de gestió d'errors per a les aplicacions React

Nous desenvolupadors a ReactJS pot guanyar confiança aprenent a solucionar problemes i resoldre errors comuns com ara problemes inesperats d'aplicacions. Solucions com l'ús de React Query, el format adequat de les respostes d'Axios i la configuració d'un tractament precís d'errors permeten evitar molts inconvenients. Millorant l'experiència de l'usuari amb missatges informatius i utilitzant components alternatius, assegureu un procés de desenvolupament més fluid.

La creació d'aplicacions estables també implica l'adopció d'estratègies de prova per validar que els components es comporten com s'espera en qualsevol condició. Amb eines com Jest i React Testing Library, els desenvolupadors poden simular les respostes de la xarxa i verificar que l'aplicació reacciona adequadament tant als èxits com als fracassos. Aquest enfocament no només reforça l'estabilitat sinó que també fomenta millors pràctiques de codificació. 🚀