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

Gỡ lỗi ReactJS: Mẹo dành cho "Lỗi ứng dụng không mong muốn"

Gỡ lỗi trong , đặc biệt là với tư cách là một nhà phát triển mới, có thể cảm thấy như đang leo dốc. Khi một ứng dụng bất ngờ gửi thông báo như "" hoặc đưa ra một lỗi không có ý nghĩa ngay lập tức, điều đó có thể khiến bạn phải đoán mò. 🧩

Loại lỗi này đọc , có thể phát sinh do nhiều vấn đề khác nhau—thường liên quan đến việc xử lý và hiển thị dữ liệu trong React. Biết cách xác định và sửa những lỗi này là rất quan trọng để giữ cho ứng dụng của bạn đi đúng hướng và cải thiện kỹ năng của bạn.

Trong ví dụ này, bạn đang sử dụng useQuery từ với yêu cầu Axios. Những lỗi như thế này thường xuất phát từ việc truyền cấu trúc dữ liệu không mong muốn hoặc lỗi cú pháp mà React không xử lý như mong đợi.

Hãy cùng tìm hiểu lý do tại sao lỗi cụ thể này có thể xuất hiện và khám phá các cách khắc phục để ứng dụng của bạn chạy trơn tru mà không có thông báo lỗi bất ngờ. 🌐 Chúng tôi sẽ giải quyết sự cố theo từng dòng một và xem tệp nào có thể gây ra sự cố trước khi trang của bạn tải.

Yêu cầu	Ví dụ về sử dụng và mô tả
useQuery	Được sử dụng để tìm nạp, lưu vào bộ đệm và cập nhật dữ liệu không đồng bộ trong các thành phần React. Trong ví dụ này, useQuery được định cấu hình với queryKey và queryFn để truy xuất các bài đăng từ API. Nó đơn giản hóa logic tìm nạp dữ liệu, tự động xử lý các trạng thái tải và lỗi.
queryKey	Mã định danh cho mỗi truy vấn trong useQuery. Ở đây, queryKey: ["posts"] được sử dụng để xác định duy nhất truy vấn bài đăng, cho phép @tanstack/react-query lưu kết quả vào bộ đệm và tránh các yêu cầu mạng dư thừa.
queryFn	Một hàm được cung cấp cho useQuery xác định cách tìm nạp dữ liệu. Trong trường hợp này, queryFn sử dụng makeRequest.get('/posts') để truy xuất dữ liệu từ điểm cuối API. Nó xử lý việc chuyển đổi dữ liệu bằng cách trả về res.data để định dạng phản hồi nếu cần.
onError	Một thuộc tính tùy chọn trong useQuery được sử dụng ở đây để ghi lại lỗi với console.error. Phương pháp này cho phép xử lý lỗi tùy chỉnh nếu truy vấn không thành công, hữu ích để hiển thị thông báo lỗi chi tiết và gỡ lỗi.
QueryClient	Trình quản lý trung tâm trong @tanstack/react-query lưu trữ và quản lý tất cả các truy vấn. Trong tập lệnh, new QueryClient() tạo một phiên bản để theo dõi tất cả các truy vấn đang hoạt động, cung cấp các tùy chọn để duy trì bộ nhớ đệm và cấu hình máy khách.
axios.get	Một phương thức cụ thể từ Axios để gửi yêu cầu HTTP GET. Được sử dụng trong queryFn để tìm nạp các bài đăng từ '/posts'. Yêu cầu này truy xuất dữ liệu ở định dạng JSON, sau đó được chuyển đến giao diện người dùng.
.map()	Phương thức mảng được sử dụng để lặp lại mảng dữ liệu bài đăng được tìm nạp. Tại đây, data.map((post) => ) hiển thị động danh sách các thành phần Post dựa trên dữ liệu được tìm nạp. Cần thiết để hiển thị danh sách các mục trong các thành phần React.
findByText	Một chức năng từ Thư viện thử nghiệm React để định vị các thành phần theo nội dung văn bản của chúng. Trong kiểm thử đơn vị, findByText(/something going gone/i) kiểm tra xem thông báo lỗi có hiển thị hay không, xác thực logic xử lý lỗi đối với các lệnh gọi API không thành công.
screen	Công cụ của Thư viện thử nghiệm phản ứng để truy cập các phần tử được hiển thị trong màn hình ảo. Được sử dụng trong các thử nghiệm để tìm và tương tác với các phần tử, như xác minh nội dung Đang tải... và Đăng xuất hiện chính xác sau khi tải dữ liệu.

Hiểu lỗi truy vấn React và kỹ thuật xử lý lỗi

Khi làm việc với React, đặc biệt là sử dụng thư viện như để tìm nạp dữ liệu, các lỗi có thể xuất hiện mà các nhà phát triển mới không thể nhận ra ngay lập tức. Một lỗi phổ biến mà người mới bắt đầu sử dụng React gặp phải là . Điều này xảy ra khi ứng dụng cố gắng hiển thị một đối tượng dưới dạng thành phần con React thay vì văn bản hoặc HTML dự kiến. Trong ví dụ của chúng tôi, sự cố phát sinh do đối tượng lỗi do useQuery trả về được chuyển trực tiếp đến JSX mà không xử lý thêm, điều mà React không thể hiểu là thành phần con hợp lệ. Để tránh điều này, điều cần thiết là phải kiểm tra và kiểm soát những gì được hiển thị ở mỗi trạng thái. Bằng cách sử dụng các kiểm tra có điều kiện, như được hiển thị trong tập lệnh, chúng tôi có thể đảm bảo rằng các lỗi, trạng thái tải và dữ liệu được tìm nạp đều hiển thị theo cách mà React có thể hiểu được. 🐱‍💻

Trong ví dụ về mã được cung cấp, tập lệnh bắt đầu bằng cách nhập các mô-đun cần thiết như , một hook từ @tanstack/react-query và từ Axios. Những điều này cho phép chúng tôi thực hiện và quản lý các lệnh gọi API một cách hiệu quả trong khi xử lý nhiều trạng thái như tải, thành công và lỗi. Hook được cấu hình với queryKey, đóng vai trò là mã định danh và queryFn, chức năng tìm nạp dữ liệu. Thiết lập này hiệu quả vì nó hợp lý hóa quy trình tìm nạp dữ liệu, xử lý bộ nhớ đệm và tìm nạp lại khi cần. Nó đặc biệt hữu ích để xây dựng các ứng dụng có thể mở rộng, yêu cầu nhiều truy vấn. Hãy tưởng tượng có một danh sách các bài đăng trên ứng dụng mạng xã hội; với queryKey và queryFn, ứng dụng biết khi nào cần tải lại dữ liệu, đảm bảo trải nghiệm người dùng mượt mà.

Để xử lý lỗi, chúng tôi đã thêm thuộc tính onError trong useQuery để ghi nhật ký và quản lý các vấn đề phát sinh trong quá trình yêu cầu. Sự bổ sung này rất quan trọng vì nó giúp xử lý các lỗi API một cách linh hoạt. Nếu không có thuộc tính này, các lỗi có thể không được chú ý, gây ra những hành vi không thể đoán trước cho người dùng. Tập lệnh cũng minh họa việc sử dụng thông báo dự phòng khi xảy ra lỗi, hiển thị "Đã xảy ra lỗi" nếu yêu cầu không thành công. Cách tiếp cận này có thể được nâng cao bằng các thông báo lỗi cụ thể từ đối tượng lỗi, như error.message, để mang lại trải nghiệm nhiều thông tin hơn cho người dùng. Đó là một chi tiết nhỏ nhưng nó giúp cải thiện độ tin cậy và độ rõ ràng của ứng dụng của bạn.

Cuối cùng, chúng tôi bao gồm các bài kiểm tra đơn vị cho thiết lập này bằng Thư viện kiểm tra Jest và React. Các thử nghiệm xác minh rằng thành phần xử lý đúng các trạng thái tải, lỗi và thành công. Ví dụ: bằng cách mô phỏng lệnh gọi API không thành công, quá trình kiểm tra đảm bảo rằng thông báo "Đã xảy ra lỗi" hiển thị chính xác, xác thực logic xử lý lỗi. Kiểm tra là một bước có giá trị vì nó cho phép bạn xác minh rằng các thành phần hoạt động như mong đợi trong các môi trường khác nhau, đảm bảo tính ổn định. Việc gỡ lỗi ứng dụng React ban đầu có thể khiến bạn cảm thấy choáng ngợp, nhưng việc tập trung vào các phương pháp như thế này—thêm dự phòng, xác thực dữ liệu đầu vào và viết bài kiểm thử—sẽ xây dựng nền tảng cho các ứng dụng mượt mà hơn, dễ dự đoán hơn. 🚀

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;

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;

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

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

Quản lý các lỗi ReactJS phổ biến cho người mới bắt đầu

Trong quá trình phát triển React, xử lý các lỗi không mong muốn như là một thách thức thường xuyên, đặc biệt đối với những người mới làm quen với khuôn khổ này. Lỗi cụ thể này thường có nghĩa là ứng dụng đang cố gắng hiển thị trực tiếp một đối tượng dưới dạng phần tử con, điều này React không chấp nhận. Điều quan trọng là phải hiểu rằng khi một thành phần hoặc hàm không trả về văn bản thuần túy hoặc phần tử React hợp lệ, ứng dụng có thể bị hỏng hoặc hiển thị các thông báo lỗi không mong muốn. Ví dụ: việc cố gắng hiển thị một đối tượng lỗi thô như trong tập lệnh có thể kích hoạt thông báo này.

sử dụng giúp đơn giản hóa việc tìm nạp dữ liệu, xử lý lỗi và lưu vào bộ nhớ đệm trong các ứng dụng React, nhưng điều quan trọng là cấu hình chính xác. Trong những trường hợp như thế này, trước tiên bạn nên kiểm tra xem hàm truy vấn đang trả về cái gì, đảm bảo rằng chỉ dữ liệu được định dạng mới được chuyển đến các thành phần. Ví dụ: tìm nạp dữ liệu bằng Axios yêu cầu chuyển đổi phản hồi, chẳng hạn như trích xuất để xóa siêu dữ liệu khỏi đối tượng. Điều này cải thiện cách React diễn giải và hiển thị phản hồi API, đảm bảo chỉ những nội dung hợp lệ mới được truyền.

Cuối cùng, người mới bắt đầu có thể hưởng lợi từ việc đưa vào các câu lệnh có điều kiện để quản lý các trạng thái truy vấn khác nhau. Kết xuất có điều kiện, chẳng hạn như trạng thái tải hoặc dự phòng lỗi, giúp ứng dụng luôn thân thiện với người dùng ngay cả khi xảy ra lỗi. Thực hiện các thông báo lỗi thông tin từ các đối tượng như thay vì mặc định “Đã xảy ra lỗi” cũng có thể cải thiện việc khắc phục sự cố. Thử nghiệm với các thư viện như Jest đảm bảo các thành phần này hoạt động có thể dự đoán được, giúp ứng dụng vừa phản hồi vừa linh hoạt. Kiểm tra không chỉ phát hiện vấn đề—nó còn tạo dựng niềm tin vào tính ổn định của ứng dụng. 😊

1. làm gì làm gì trong React?
2. các 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 hoạt động trong Truy vấn React?
6. chỉ định cách tìm nạp dữ liệu trong . Đây là chức năng chịu trách nhiệm thực hiện các yêu cầu API, như .
7. Tại sao sử dụng để hiển thị lỗi?
8. sử dụng 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ì trong Truy vấn phản ứng?
10. 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, gọi lại trong 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ì được sử dụng trong useQuery?
14. TRONG 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ư Và để 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 làm việc trong ví dụ?
22. 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.

Các nhà phát triển mới ở 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. 🚀