„ReactJS“ klaidos trikčių šalinimas: „Netikėta programos klaida“ naudojant „useQuery“ ir „Axios“

ReactJS – „Netikėtos programos klaidos“ tvarkymas naudojant „useQuery“.

Šis scenarijus apdoroja klaidą naudodamas ReaguotiJS ir @tanstack/react-query dinaminiam duomenų gavimui. Jis naudoja tinkamą klaidų tvarkymą, kad būtų užtikrintas optimalus kodo veikimas ir saugumas.

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;

Alternatyvus sprendimas: atsarginių komponentų naudojimas

Taikant šį metodą, scenarijus apibrėžia atsarginius komponentus, kad būtų geresnė vartotojo patirtis ir papildoma klaidų informacija.

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;

Galinis scenarijus: pavyzdinio Axios galinio taško nustatymas bandymams

Šis scenarijus naudoja Node.js ir Express kad nustatytumėte bandomąjį galutinį tašką įrašų duomenims gauti.

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

Vienetų testai: komponentų atvaizdavimo ir API gavimo tikrinimas

Šie testai patvirtina komponentų atvaizdavimą ir API gavimo sėkmę naudojant Juokas ir Reakcijos testavimo biblioteka.

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

Populiariausi atsako užklausų ir klaidų tvarkymo DUK

1. Ką daro useQuery daryti React?
2. The useQuery hook paima, talpina ir atnaujina asinchroninius duomenis „React“ komponentuose, automatiškai apdorodamas įkėlimo, klaidų ir sėkmės būsenas.
3. Kodėl „React“ rodo klaidą „Objektai negalioja kaip React vaikas“?
4. Ši klaida įvyksta, kai objektas perduodamas tiesiogiai kaip antrinis elementas. „React“ reikalingas tekstas, skaičiai arba „React“ elementai kaip vaikai, o ne objektai.
5. Kaip veikia queryFn dirbti React Query?
6. queryFn nurodo, kaip gaunami duomenys useQuery. Tai funkcija, atsakinga už API užklausų teikimą, pvz axios.get.
7. Kodėl naudoti error.message už klaidų rodymą?
8. Naudojant error.message pateikia išsamius, patogius vartotojui klaidų pranešimus, o ne neaiškius teiginius, pvz., „Kažkas nutiko“, padedančius šalinti triktis.
9. Koks yra vaidmuo queryKey React Query?
10. queryKey unikaliai identifikuoja kiekvieną užklausą, leisdama „React Query“ išsaugoti rezultatus talpykloje ir sumažinti nereikalingas tinklo užklausas.
11. Ar „React Query“ galiu tvarkyti klaidas skirtingai?
12. Taip, onError atgalinis skambutis useQuery gali būti pritaikytas tvarkyti konkrečius klaidų tipus, kad būtų lengviau derinti.
13. Kas yra onError naudojamas in useQuery?
14. onError in useQuery yra atgalinis skambutis, kuris vykdomas, kai užklausos metu įvyksta klaida. Tai leidžia dinamiškai registruoti arba rodyti klaidų informaciją.
15. Kaip išbandyti „React Query“ komponentus?
16. Naudokite tokias bibliotekas kaip Jest ir React Testing Library imituoti API atsakymus ir patikrinti, ar įkėlimo, klaidų ir sėkmės būsenos veikia taip, kaip tikėtasi.
17. Kodėl „React“ turėčiau naudoti sąlyginį atvaizdavimą?
18. Sąlyginis atvaizdavimas pagerina vartotojo patirtį, nes rodoma specifinė vartotojo sąsaja, pagrįsta įkėlimo, klaidos ar sėkmės būsenomis, o ne rodant neapdorotus duomenis ar klaidas.
19. Kokie yra atsarginiai „React“ komponentai?
20. Atsarginiai komponentai teikia alternatyvią vartotojo sąsają, pvz., klaidos arba įkėlimo pranešimus, jei pagrindinis turinys negali būti rodomas. Jie pagerina programos atsparumą ir vartotojo patirtį.
21. Kaip veikia axios.get dirbti pavyzdyje?
22. axios.get siunčia HTTP GET užklausą serveriui, kad gautų duomenis. Čia jis paima įrašų duomenis JSON formatu, kad būtų galima pateikti komponente.

„React Apps“ klaidų tvarkymo patarimai

Nauji kūrėjai ReaguotiJS galite įgyti pasitikėjimo išmokę šalinti triktis ir išspręsti įprastas klaidas, pvz., netikėtas programos problemas. Tokie sprendimai kaip „React Query“ naudojimas, tinkamas „Axios“ atsakymų formatavimas ir tikslaus klaidų valdymo nustatymas leidžia išvengti daugelio spąstų. Pagerindami vartotojo patirtį informatyviais pranešimais ir naudodami atsarginius komponentus, užtikrinate sklandesnį kūrimo procesą.

Stabilių programų kūrimas taip pat apima testavimo strategijų priėmimą, siekiant patvirtinti, kad komponentai bet kokiomis sąlygomis veikia taip, kaip tikimasi. Naudodami tokius įrankius kaip „Jest“ ir „React Testing Library“, kūrėjai gali imituoti tinklo atsakymus ir patikrinti, ar programa tinkamai reaguoja ir į sėkmę, ir į nesėkmes. Šis metodas ne tik sustiprina stabilumą, bet ir skatina geresnę kodavimo praktiką. 🚀