ReactJS kļūdas problēmu novēršana: "Negaidīta lietojumprogrammas kļūda" ar useQuery un Axios

ReactJS — “Negaidītas lietojumprogrammas kļūdas” apstrāde in useQuery

Šis skripts apstrādā kļūdu, izmantojot ReaģētJS un @tanstack/react-query dinamiskai datu ielādei. Tas izmanto pareizu kļūdu apstrādi, lai nodrošinātu optimālu koda veiktspēju un drošību.

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;

Alternatīvs risinājums: izmantojiet rezerves komponentus

Izmantojot šo pieeju, skripts definē rezerves komponentus, lai nodrošinātu labāku lietotāja pieredzi un papildu informāciju par kļūdām.

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;

Aizmugurējais skripts: Axios galapunkta parauga iestatīšana testēšanai

Šis skripts izmanto Node.js un Express lai iestatītu testa galapunktu ziņu datu iegūšanai.

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

Vienību testi: komponentu renderēšanas un API ielādes pārbaude

Tālāk norādītie testi apstiprina komponentu renderēšanu un API ielādes panākumus, izmantojot Joks un Reakcijas testēšanas bibliotēka.

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

Visbiežāk uzdotie jautājumi par reaģēšanas vaicājumiem un kļūdu apstrādi

1. Ko dara useQuery darīt programmā React?
2. The useQuery āķis ienes, kešatmiņas un atjaunina asinhronos datus React komponentos, automātiski apstrādājot ielādes, kļūdu un veiksmes stāvokļus.
3. Kāpēc React parāda kļūdu "Objekti nav derīgi kā React bērns"?
4. Šī kļūda rodas, ja objekts tiek nodots tieši kā bērnelements. Reaģēšanai ir nepieciešams teksts, cipari vai React elementi kā bērni, nevis objekti.
5. Kā dara queryFn strādāt React Query?
6. queryFn norāda, kā dati tiek ielādēti useQuery. Tā ir funkcija, kas ir atbildīga par API pieprasījumu veikšanu, piemēram axios.get.
7. Kāpēc izmantot error.message par kļūdu parādīšanu?
8. Izmantojot error.message nodrošina detalizētus, lietotājam draudzīgus kļūdu ziņojumus, nevis neskaidrus paziņojumus, piemēram, "Kaut kas nogāja greizi", palīdzot problēmu novēršanā.
9. Kāda ir loma queryKey in React Query?
10. queryKey unikāli identificē katru vaicājumu, ļaujot React Query saglabāt rezultātus kešatmiņā un samazināt nevajadzīgus tīkla pieprasījumus.
11. Vai React Query es varu apstrādāt kļūdas atšķirīgi?
12. Jā, onError atzvanīšana useQuery var pielāgot, lai apstrādātu konkrētus kļūdu veidus, atvieglojot atkļūdošanu.
13. Kas ir onError izmanto in useQuery?
14. onError iekšā useQuery ir atzvans, kas tiek palaists, kad vaicājuma laikā rodas kļūda. Tas ļauj dinamiski reģistrēt vai parādīt kļūdu informāciju.
15. Kā pārbaudīt React Query komponentus?
16. Izmantojiet tādas bibliotēkas kā Jest un React Testing Library lai simulētu API atbildes un pārbaudītu, vai ielādes, kļūdu un panākumu stāvokļi darbojas, kā paredzēts.
17. Kāpēc lietotnē React ir jāizmanto nosacījuma renderēšana?
18. Nosacītā renderēšana uzlabo lietotāja pieredzi, parādot konkrētu lietotāja interfeisu, pamatojoties uz ielādes, kļūdu vai panākumu stāvokļiem, nevis rādot neapstrādātus datus vai kļūdas.
19. Kas ir React rezerves komponenti?
20. Atkāpšanās komponenti nodrošina alternatīvu lietotāja interfeisu, piemēram, kļūdu vai ielādes ziņojumus, ja galveno saturu nevar parādīt. Tie uzlabo lietotņu noturību un lietotāja pieredzi.
21. Kā dara axios.get strādāt piemērā?
22. axios.get nosūta serverim HTTP GET pieprasījumu datu izgūšanai. Šeit tas ienes ziņu datus JSON formātā renderēšanai komponentā.

Kļūdu apstrādes padomi React Apps

Jauni izstrādātāji ReaģētJS var iegūt pārliecību, iemācoties novērst un atrisināt bieži sastopamas kļūdas, piemēram, neparedzētas lietojumprogrammu problēmas. Tādi risinājumi kā React Query izmantošana, pareiza Axios atbilžu formatēšana un precīzas kļūdu apstrādes iestatīšana ļauj izvairīties no daudzām kļūmēm. Uzlabojot lietotāja pieredzi ar informatīviem ziņojumiem un izmantojot rezerves komponentus, jūs nodrošināsiet vienmērīgāku izstrādes procesu.

Stabilu lietojumprogrammu izveide ietver arī testēšanas stratēģiju pieņemšanu, lai pārbaudītu, vai komponenti darbojas kā paredzēts jebkuros apstākļos. Izmantojot tādus rīkus kā Jest un React Testing Library, izstrādātāji var simulēt tīkla atbildes un pārbaudīt, vai lietotne atbilstoši reaģē gan uz panākumiem, gan neveiksmēm. Šī pieeja ne tikai nostiprina stabilitāti, bet arī veicina labāku kodēšanas praksi. 🚀