ReactJS-virheen vianmääritys: "Odottamaton sovellusvirhe" useQueryn ja Axiosin kanssa

ReactJS - Odottamattoman sovellusvirheen käsittely useQueryssa

Tämä komentosarja käsittelee virheen käyttämällä ReactJS ja @tanstack/react-query dynaamiseen tiedonhakuun. Se käyttää asianmukaista virheenkäsittelyä optimaalisen koodin suorituskyvyn ja turvallisuuden takaamiseksi.

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;

Vaihtoehtoinen ratkaisu: Varakomponenttien käyttäminen

Tässä lähestymistavassa komentosarja määrittelee varakomponentit paremman käyttökokemuksen ja virhetietojen lisäämiseksi.

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;

Taustaskripti: Axios-näytteen päätepisteen määrittäminen testausta varten

Tämä skripti käyttää Node.js ja Ilmaista määrittääksesi testipäätepisteen viestien tietojen hakemista varten.

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

Yksikkötestit: Komponenttien renderöinnin ja API-haun tarkistaminen

Seuraavat testit vahvistavat komponenttien hahmontamisen ja API-haun onnistumisen käyttämällä Jest ja 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();
});

Suosituimmat reagoivat kyselyt ja virheiden käsittelyn usein kysytyt kysymykset

1. Mitä tekee useQuery tehdä Reactissa?
2. The useQuery koukku hakee, tallentaa ja päivittää asynkronisia tietoja React-komponenteissa, jotka käsittelevät automaattisesti lataus-, virhe- ja onnistumistilat.
3. Miksi React näyttää "Objektit eivät kelpaa React-lapsina" -virheen?
4. Tämä virhe tapahtuu, kun objekti välitetään suoraan lapsielementtinä. React vaatii tekstiä, numeroita tai React-elementtejä lapsina, ei objekteina.
5. Miten queryFn työskentelet React Queryssä?
6. queryFn määrittää, kuinka tiedot haetaan useQuery. Se on toiminto, joka vastaa API-pyyntöjen tekemisestä, esim axios.get.
7. Miksi käyttää error.message virheiden näyttämiseen?
8. Käyttämällä error.message tarjoaa yksityiskohtaisia, käyttäjäystävällisiä virheilmoituksia eikä epämääräisiä lausuntoja, kuten "Jotain meni pieleen", mikä auttaa vianetsinnässä.
9. Mikä on rooli queryKey Reaktiokyselyssä?
10. queryKey tunnistaa yksilöllisesti jokaisen kyselyn, jolloin React Query voi tallentaa tulokset välimuistiin ja vähentää tarpeettomia verkkopyyntöjä.
11. Voinko käsitellä virheitä eri tavalla React Queryssä?
12. Kyllä, onError takaisinsoitto useQuery voidaan mukauttaa käsittelemään tiettyjä virhetyyppejä, mikä tekee virheenkorjauksesta helpompaa.
13. Mikä on onError käytetään in useQuery?
14. onError sisään useQuery on takaisinsoitto, joka suoritetaan, kun kyselyn aikana tapahtuu virhe. Sen avulla voit kirjata tai näyttää virhetiedot dynaamisesti.
15. Kuinka testaan ​​React Queryn komponentteja?
16. Käytä kirjastoja, kuten Jest ja React Testing Library simuloida API-vastauksia ja tarkistaa, toimivatko lataus-, virhe- ja onnistumistilat odotetulla tavalla.
17. Miksi minun pitäisi käyttää ehdollista renderöintiä Reactissa?
18. Ehdollinen renderöinti parantaa käyttökokemusta näyttämällä tietyn käyttöliittymän lataus-, virhe- tai onnistumistilojen perusteella sen sijaan, että näyttäisit raakadataa tai virheitä.
19. Mitä varakomponentteja Reactissa on?
20. Varakomponentit tarjoavat vaihtoehtoisen käyttöliittymän, kuten virhe- tai lataussanomia, jos pääsisältöä ei voida näyttää. Ne parantavat sovellusten kestävyyttä ja käyttökokemusta.
21. Miten axios.get toimii esimerkissä?
22. axios.get lähettää HTTP GET -pyynnön palvelimelle tietojen hakemiseksi. Täällä se hakee viestitiedot JSON-muodossa komponentissa hahmontamista varten.

React-sovellusten virheenkäsittelyvinkkejä

Uusia kehittäjiä mukaan ReactJS voi saada luottamusta oppimalla vianetsinnän ja ratkaisemaan yleisiä virheitä, kuten odottamattomia sovellusongelmia. Ratkaisut, kuten React Queryn käyttö, Axios-vastausten oikea muotoilu ja tarkan virheenkäsittelyn määrittäminen, mahdollistavat monien sudenkuopat välttämisen. Parannamalla käyttökokemusta informatiivisilla viesteillä ja käyttämällä varakomponentteja varmistat sujuvamman kehitysprosessin.

Vakaiden sovellusten rakentamiseen kuuluu myös testausstrategioiden käyttöönotto sen varmistamiseksi, että komponentit toimivat odotetulla tavalla kaikissa olosuhteissa. Jest- ja React Testing Library -työkalujen avulla kehittäjät voivat simuloida verkkovastauksia ja varmistaa, että sovellus reagoi asianmukaisesti sekä onnistumiseen että epäonnistumiseen. Tämä lähestymistapa ei ainoastaan ​​vahvista vakautta, vaan myös edistää parempia koodauskäytäntöjä. 🚀