Khắc phục sự cố Lỗi ReactJS: "Lỗi ứng dụng không mong muốn" với useQuery và Axios

ReactJS - Xử lý "Lỗi ứng dụng không mong muốn" trong useQuery

Tập lệnh này xử lý lỗi bằng cách sử dụng ReactJS Và @tanstack/Reac-truy vấn để tìm nạp dữ liệu động. Nó sử dụng xử lý lỗi thích hợp để có hiệu suất và bảo mật mã tối ưu.

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;

Giải pháp thay thế: Sử dụng thành phần dự phòng

Trong phương pháp này, tập lệnh xác định các thành phần dự phòng để mang lại trải nghiệm người dùng tốt hơn và có thêm thông tin lỗi.

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;

Tập lệnh back-end: Thiết lập điểm cuối Axios mẫu để kiểm tra

Kịch bản này sử dụng Node.js Và Thể hiện để thiết lập điểm cuối thử nghiệm nhằm tìm nạp dữ liệu bài đăng.

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

Kiểm thử đơn vị: Xác minh kết xuất thành phần và tìm nạp API

Các thử nghiệm sau đây xác thực kết xuất thành phần và tìm nạp API thành công bằng cách sử dụng trò đùa Và Thư viện thử nghiệm phản ứng.

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

Câu hỏi thường gặp về xử lý lỗi và truy vấn React hàng đầu

1. làm gì useQuery làm gì trong React?
2. các useQuery hook tìm nạp, lưu trữ và cập nhật dữ liệu không đồng bộ trong các thành phần React, tự động xử lý các trạng thái tải, lỗi và thành công.
3. Tại sao React hiển thị lỗi "Đối tượng không hợp lệ khi còn là con React"?
4. Lỗi này xảy ra khi một đối tượng được truyền trực tiếp dưới dạng phần tử con. React yêu cầu văn bản, số hoặc các phần tử React ở dạng con chứ không phải đối tượng.
5. Làm thế nào queryFn hoạt động trong Truy vấn React?
6. queryFn chỉ định cách tìm nạp dữ liệu trong useQuery. Đây là chức năng chịu trách nhiệm thực hiện các yêu cầu API, như axios.get.
7. Tại sao sử dụng error.message để hiển thị lỗi?
8. sử dụng error.message cung cấp các thông báo lỗi chi tiết, thân thiện với người dùng thay vì các câu lệnh mơ hồ như "Đã xảy ra lỗi", giúp khắc phục sự cố.
9. Vai trò của là gì queryKey trong Truy vấn phản ứng?
10. queryKey xác định duy nhất từng truy vấn, cho phép React Query lưu kết quả vào bộ đệm và giảm các yêu cầu mạng không cần thiết.
11. Tôi có thể xử lý các lỗi khác nhau trong React Query không?
12. Vâng, onError gọi lại trong useQuery có thể được tùy chỉnh để xử lý các loại lỗi cụ thể, giúp việc gỡ lỗi dễ dàng hơn.
13. Là gì onError được sử dụng trong useQuery?
14. onError TRONG useQuery là một lệnh gọi lại chạy khi xảy ra lỗi trong quá trình truy vấn. Nó cho phép bạn đăng nhập hoặc hiển thị thông tin lỗi một cách linh hoạt.
15. Làm cách nào để kiểm tra các thành phần React Query?
16. Sử dụng các thư viện như Jest Và React Testing Library để mô phỏng phản hồi API và kiểm tra xem trạng thái tải, lỗi và thành công có hoạt động như mong đợi hay không.
17. Tại sao tôi nên sử dụng kết xuất có điều kiện trong React?
18. Kết xuất có điều kiện cải thiện trải nghiệm người dùng bằng cách hiển thị giao diện người dùng cụ thể dựa trên trạng thái tải, lỗi hoặc thành công thay vì hiển thị dữ liệu thô hoặc lỗi.
19. Các thành phần dự phòng trong React là gì?
20. Các thành phần dự phòng cung cấp giao diện người dùng thay thế, chẳng hạn như thông báo lỗi hoặc đang tải nếu nội dung chính không thể hiển thị. Chúng cải thiện khả năng phục hồi của ứng dụng và trải nghiệm người dùng.
21. Làm thế nào axios.get làm việc trong ví dụ?
22. axios.get gửi yêu cầu HTTP GET đến máy chủ để lấy dữ liệu. Ở đây, nó tìm nạp dữ liệu bài đăng ở định dạng JSON để hiển thị trong thành phần.

Mẹo xử lý lỗi cho ứng dụng React

Các nhà phát triển mới ở ReactJS có thể có được sự tự tin bằng cách học cách khắc phục và giải quyết các lỗi phổ biến như sự cố ứng dụng không mong muốn. Các giải pháp như sử dụng React Query, định dạng chính xác các phản hồi Axios và thiết lập xử lý lỗi chính xác giúp tránh được nhiều cạm bẫy. Bằng cách cải thiện trải nghiệm người dùng với các thông báo mang tính thông tin và sử dụng các thành phần dự phòng, bạn đảm bảo quá trình phát triển suôn sẻ hơn.

Xây dựng các ứng dụng ổn định cũng liên quan đến việc áp dụng các chiến lược thử nghiệm để xác thực rằng các thành phần hoạt động như mong đợi trong mọi điều kiện. Với các công cụ như Jest và Thư viện thử nghiệm React, nhà phát triển có thể mô phỏng phản hồi của mạng và xác minh rằng ứng dụng phản ứng phù hợp với cả thành công và thất bại. Cách tiếp cận này không chỉ củng cố sự ổn định mà còn thúc đẩy thực hành mã hóa tốt hơn. 🚀