ReactJS-i vea tõrkeotsing: "Ootamatu rakenduse viga" koos useQuery ja Axios

ReactJS – "Ootamatu rakenduse vea" käsitlemine useQuerys

See skript käsitleb viga kasutades ReactJS ja @tanstack/react-query dünaamiliseks andmete toomiseks. See kasutab koodi optimaalse jõudluse ja turvalisuse tagamiseks õiget veakäsitlust.

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;

Alternatiivne lahendus: varukomponentide kasutamine

Selle lähenemisviisi puhul määratleb skript parema kasutuskogemuse ja veateabe lisamiseks varukomponendid.

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;

Taustaskript: Axiose näidislõpp-punkti seadistamine testimiseks

See skript kasutab Node.js ja Ekspress postituste andmete toomiseks testi lõpp-punkti seadistamiseks.

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

Ühikutestid: komponentide renderdamise ja API toomise kontrollimine

Järgmised testid kinnitavad komponentide renderdamist ja API toomise edukust Naljakas ja Reaktsiooni testimise raamatukogu.

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

Kõige sagedamini reageerivad päringud ja vigade käsitlemise KKK

1. Mis teeb useQuery teha Reactis?
2. The useQuery konks tõmbab, vahemällu salvestab ja värskendab Reacti komponentide asünkroonseid andmeid, haldades automaatselt laadimis-, vea- ja eduolekuid.
3. Miks näitab React viga "Objektid ei kehti Reacti lapsena"?
4. See viga ilmneb siis, kui objekt edastatakse otse alamelemendina. Reaktsiooniks on vaja teksti, numbreid või Reacti elemente kui lapsi, mitte objekte.
5. Kuidas teeb queryFn kas töötate React Querys?
6. queryFn määrab, kuidas andmeid tuuakse useQuery. See on funktsioon, mis vastutab näiteks API päringute tegemise eest axios.get.
7. Miks kasutada error.message vigade kuvamise eest?
8. Kasutades error.message pakub üksikasjalikke ja kasutajasõbralikke veateateid, mitte ebamääraseid avaldusi, nagu "Midagi läks valesti", mis aitab tõrkeotsingul.
9. Mis roll on queryKey kas reageerimispäringus?
10. queryKey tuvastab unikaalselt iga päringu, võimaldades React Queryl tulemusi vahemällu salvestada ja tarbetuid võrgupäringuid vähendada.
11. Kas ma saan reageerimispäringus vigu käsitleda erinevalt?
12. Jah, onError tagasi helistada useQuery saab kohandada konkreetsete veatüüpide käsitlemiseks, muutes silumise lihtsamaks.
13. Mis on onError kasutatakse in useQuery?
14. onError sisse useQuery on tagasihelistamine, mis käivitub, kui päringu ajal ilmneb tõrge. See võimaldab teil dünaamiliselt logida või kuvada veateavet.
15. Kuidas testida React Query komponente?
16. Kasutage selliseid teeke nagu Jest ja React Testing Library API-vastuste simuleerimiseks ja kontrollimiseks, kas laadimis-, vea- ja eduolekud töötavad ootuspäraselt.
17. Miks peaksin Reactis kasutama tingimuslikku renderdamist?
18. Tingimuslik renderdamine parandab kasutajakogemust, kuvades algandmete või vigade kuvamise asemel konkreetse kasutajaliidese laadimise, vea või õnnestumise olekute alusel.
19. Mis on Reacti varukomponendid?
20. Varukomponendid pakuvad alternatiivset kasutajaliidest, näiteks veateateid või laadimissõnumeid, kui põhisisu ei saa kuvada. Need parandavad rakenduse vastupidavust ja kasutajakogemust.
21. Kuidas teeb axios.get tööta näites?
22. axios.get saadab andmete toomiseks serverile HTTP GET päringu. Siin toob see JSON-vormingus postituste andmed komponendis renderdamiseks.

Nõuanded Reacti rakenduste veakäsitluse jaoks

Uued arendajad sisse ReactJS saab enesekindlust, kui õpib tõrkeotsingut ja tavalisi vigu, nagu ootamatud rakenduseprobleemid, lahendama. Sellised lahendused nagu React Query kasutamine, Axiose vastuste õige vormindamine ja täpse veakäsitluse seadistamine võimaldavad vältida paljusid lõkse. Parandades kasutajakogemust informatiivsete sõnumitega ja kasutades varukomponente, tagate sujuvama arendusprotsessi.

Stabiilsete rakenduste loomine hõlmab ka testimisstrateegiate vastuvõtmist, et kontrollida, kas komponendid käituvad igas olukorras ootuspäraselt. Selliste tööriistade nagu Jest ja React Testing Library abil saavad arendajad simuleerida võrgu vastuseid ja kontrollida, kas rakendus reageerib õigesti nii õnnestumistele kui ka ebaõnnestumistele. See lähenemisviis mitte ainult ei tugevda stabiilsust, vaid soodustab ka paremaid kodeerimistavasid. 🚀