Menyelesaikan masalah Ralat ReactJS: "Ralat Aplikasi Tidak Dijangka" dengan useQuery dan Axios

ReactJS - Mengendalikan "Ralat Aplikasi Tidak Dijangka" dalam useQuery

Skrip ini mengendalikan ralat menggunakan ReactJS dan @tanstack/react-query untuk pengambilan data dinamik. Ia menggunakan pengendalian ralat yang betul untuk prestasi dan keselamatan kod yang optimum.

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;

Penyelesaian Alternatif: Menggunakan Komponen Sandaran

Dalam pendekatan ini, skrip mentakrifkan komponen sandaran untuk pengalaman pengguna yang lebih baik dan maklumat ralat tambahan.

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;

Skrip Bahagian Belakang: Menyediakan Sampel Titik Akhir Axios untuk Pengujian

Skrip ini menggunakan Node.js dan Ekspres untuk menyediakan titik akhir ujian untuk mengambil data siaran.

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

Ujian Unit: Mengesahkan Rendering Komponen dan Pengambilan API

Ujian berikut mengesahkan pemaparan komponen dan kejayaan pengambilan API menggunakan Jest dan Pustaka Pengujian React.

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

Soalan Lazim Pertanyaan React & Pengendalian Ralat Teratas

1. Apa yang boleh useQuery lakukan dalam React?
2. The useQuery pengambilan cangkuk, cache dan kemas kini data tak segerak dalam komponen React, secara automatik mengendalikan keadaan pemuatan, ralat dan kejayaan.
3. Mengapa React menunjukkan ralat "Objek tidak sah sebagai anak React"?
4. Ralat ini berlaku apabila objek dihantar terus sebagai elemen anak. React memerlukan teks, nombor atau elemen React sebagai kanak-kanak, bukan objek.
5. Bagaimana queryFn bekerja dalam React Query?
6. queryFn menentukan cara data diambil useQuery. Ia adalah fungsi yang bertanggungjawab untuk membuat permintaan API, seperti axios.get.
7. Kenapa guna error.message untuk memaparkan ralat?
8. menggunakan error.message menyediakan mesej ralat mesra pengguna yang terperinci dan bukannya kenyataan yang samar-samar seperti "Sesuatu yang tidak kena," membantu menyelesaikan masalah.
9. Apakah peranan queryKey dalam React Query?
10. queryKey mengenal pasti secara unik setiap pertanyaan, membenarkan React Query untuk cache keputusan dan mengurangkan permintaan rangkaian yang tidak perlu.
11. Bolehkah saya mengendalikan ralat secara berbeza dalam React Query?
12. Ya, yang onError panggil balik masuk useQuery boleh disesuaikan untuk mengendalikan jenis ralat tertentu, menjadikan penyahpepijatan lebih mudah.
13. Apa itu onError digunakan untuk dalam useQuery?
14. onError dalam useQuery ialah panggilan balik yang berjalan apabila ralat berlaku semasa pertanyaan. Ia membolehkan anda log atau memaparkan maklumat ralat secara dinamik.
15. Bagaimanakah saya menguji komponen React Query?
16. Gunakan perpustakaan seperti Jest dan React Testing Library untuk mensimulasikan respons API dan menyemak sama ada keadaan pemuatan, ralat dan kejayaan berfungsi seperti yang diharapkan.
17. Mengapa saya perlu menggunakan pemaparan bersyarat dalam React?
18. Paparan bersyarat meningkatkan pengalaman pengguna dengan memaparkan UI tertentu berdasarkan pemuatan, ralat atau keadaan kejayaan dan bukannya menunjukkan data mentah atau ralat.
19. Apakah komponen sandaran dalam React?
20. Komponen sandaran menyediakan UI alternatif, seperti ralat atau memuatkan mesej, jika kandungan utama tidak dapat dipaparkan. Mereka meningkatkan daya tahan apl dan pengalaman pengguna.
21. Bagaimana axios.get kerja dalam contoh?
22. axios.get menghantar permintaan HTTP GET kepada pelayan untuk mendapatkan semula data. Di sini, ia mengambil data siaran dalam format JSON untuk dipaparkan dalam komponen.

Petua Mengendalikan Ralat untuk Apl React

Pembangun baharu dalam ReactJS boleh memperoleh keyakinan dengan belajar menyelesaikan masalah dan menyelesaikan ralat biasa seperti isu aplikasi yang tidak dijangka. Penyelesaian seperti menggunakan React Query, memformatkan respons Axios dengan betul dan menyediakan pengendalian ralat yang tepat memungkinkan untuk mengelakkan banyak perangkap. Dengan meningkatkan pengalaman pengguna dengan mesej bermaklumat dan menggunakan komponen sandaran, anda memastikan proses pembangunan yang lebih lancar.

Membina aplikasi yang stabil juga melibatkan penggunaan strategi ujian untuk mengesahkan bahawa komponen berkelakuan seperti yang diharapkan dalam apa jua keadaan. Dengan alatan seperti Perpustakaan Pengujian Jest dan React, pembangun boleh mensimulasikan respons rangkaian dan mengesahkan bahawa apl bertindak balas dengan sewajarnya kepada kedua-dua kejayaan dan kegagalan. Pendekatan ini bukan sahaja mengukuhkan kestabilan tetapi juga memupuk amalan pengekodan yang lebih baik. 🚀