Odstraňování problémů ReactJS Error: „Neočekávaná chyba aplikace“ s useQuery a Axios

ReactJS – zpracování „neočekávané chyby aplikace“ v useQuery

Tento skript řeší chybu pomocí ReactJS a @tanstack/react-query pro dynamické načítání dat. Využívá správné zpracování chyb pro optimální výkon kódu a zabezpečení.

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;

Alternativní řešení: Použití záložních komponent

V tomto přístupu skript definuje záložní komponenty pro lepší uživatelskou zkušenost a další informace o chybách.

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;

Back-end Script: Nastavení ukázkového koncového bodu Axios pro testování

Tento skript používá Node.js a Vyjádřit k nastavení testovacího koncového bodu pro načítání dat příspěvků.

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

Unit Tests: Ověření vykreslování komponent a načítání API

Následující testy ověřují úspěšnost vykreslování komponent a načítání API pomocí Žert a React Testovací knihovna.

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

Nahoru Časté dotazy týkající se dotazů a řešení chyb

1. Co dělá useQuery dělat v Reactu?
2. The useQuery hák načítá, ukládá do mezipaměti a aktualizuje asynchronní data v komponentách React, přičemž automaticky zpracovává stavy načítání, chyb a úspěšnosti.
3. Proč se v Reactu zobrazuje chyba „Objekty nejsou platné jako dítě React“?
4. K této chybě dochází, když je objekt předán přímo jako podřízený prvek. React vyžaduje text, čísla nebo prvky React jako děti, nikoli objekty.
5. Jak to dělá queryFn pracovat v React Query?
6. queryFn určuje, jak se data načítají useQuery. Je to funkce zodpovědná za vytváření požadavků API, jako je axios.get.
7. Proč používat error.message pro zobrazení chyb?
8. Použití error.message poskytuje podrobné, uživatelsky přívětivé chybové zprávy spíše než vágní prohlášení jako „Něco se pokazilo“, což pomáhá s řešením problémů.
9. Jaká je role queryKey v React Query?
10. queryKey jedinečně identifikuje každý dotaz, což umožňuje React Query ukládat výsledky do mezipaměti a redukovat zbytečné síťové požadavky.
11. Mohu v React Query zacházet s chybami jinak?
12. Ano, onError zpětné zavolání useQuery lze přizpůsobit tak, aby zpracovávalo specifické typy chyb, což usnadňuje ladění.
13. co je onError použité pro in useQuery?
14. onError v useQuery je zpětné volání, které se spustí, když během dotazu dojde k chybě. Umožňuje dynamicky zaznamenávat nebo zobrazovat informace o chybách.
15. Jak otestuji komponenty React Query?
16. Používejte knihovny jako Jest a React Testing Library k simulaci odpovědí API a kontrole, zda stavy načítání, chyb a úspěšnosti fungují podle očekávání.
17. Proč bych měl v Reactu používat podmíněné vykreslování?
18. Podmíněné vykreslování zlepšuje uživatelskou zkušenost tím, že zobrazuje konkrétní uživatelské rozhraní na základě načítání, chyb nebo úspěšnosti namísto zobrazení nezpracovaných dat nebo chyb.
19. Co jsou záložní komponenty v Reactu?
20. Záložní komponenty poskytují alternativní uživatelské rozhraní, jako jsou chybové zprávy nebo zprávy o načítání, pokud nelze zobrazit hlavní obsah. Zlepšují odolnost aplikace a uživatelskou zkušenost.
21. Jak to dělá axios.get práce v příkladu?
22. axios.get odešle požadavek HTTP GET na server k načtení dat. Zde načte data příspěvků ve formátu JSON pro vykreslení v komponentě.

Tipy pro řešení chyb pro aplikace React

Noví vývojáři v ReactJS může získat jistotu tím, že se naučí odstraňovat a řešit běžné chyby, jako jsou neočekávané problémy s aplikacemi. Řešení, jako je použití React Query, správné formátování odpovědí Axios a nastavení přesného zpracování chyb, umožňují vyhnout se mnoha nástrahám. Zlepšením uživatelské zkušenosti pomocí informativních zpráv a použitím záložních komponent zajistíte hladší proces vývoje.

Vytváření stabilních aplikací také zahrnuje přijetí testovacích strategií k ověření, zda se komponenty chovají podle očekávání za jakýchkoli podmínek. Pomocí nástrojů, jako je Jest a React Testing Library, mohou vývojáři simulovat reakce sítě a ověřit, zda aplikace správně reaguje na úspěchy i neúspěchy. Tento přístup nejen posiluje stabilitu, ale také podporuje lepší postupy kódování. 🚀