使用 useQuery 和 Axios 排除 ReactJS 错误：“意外应用程序错误”

ReactJS - 处理 useQuery 中的“意外应用程序错误”

该脚本使用以下方法处理错误 ReactJS 和 @tanstack/反应查询 用于动态数据获取。它采用适当的错误处理来实现最佳的代码性能和安全性。

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;

后端脚本：设置示例 Axios 端点以进行测试

该脚本使用 Node.js 和 表达 设置用于获取帖子数据的测试端点。

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

单元测试：验证组件渲染和 API 获取

以下测试使用以下方法验证组件渲染和 API 获取是否成功 笑话 和 反应测试库。

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

React 查询和错误处理常见问题解答

1. 什么是 useQuery 在反应中做什么？
2. 这 useQuery hook 获取、缓存和更新 React 组件中的异步数据，自动处理加载、错误和成功状态。
3. 为什么 React 显示“对象作为 React 子对象无效”错误？
4. 当对象作为子元素直接传递时会发生此错误。 React 需要文本、数字或 React 元素作为子元素，而不是对象。
5. 怎么样 queryFn 在 React Query 中工作？
6. queryFn 指定如何获取数据 useQuery。它是负责发出 API 请求的函数，例如 axios.get。
7. 为什么使用 error.message 用于显示错误？
8. 使用 error.message 提供详细的、用户友好的错误消息，而不是诸如“出了问题”之类的模糊陈述，有助于排除故障。
9. 的作用是什么 queryKey 在反应查询中？
10. queryKey 唯一标识每个查询，允许 React Query 缓存结果并减少不必要的网络请求。
11. 我可以在 React Query 中以不同的方式处理错误吗？
12. 是的， onError 回调中 useQuery 可以定制以处理特定的错误类型，使调试更容易。
13. 什么是 onError 用于useQuery？
14. onError 在 useQuery 是在查询期间发生错误时运行的回调。它允许您动态记录或显示错误信息。
15. 如何测试 React Query 组件？
16. 使用类似的库 17 号 和 React Testing Library 模拟 API 响应并检查加载、错误和成功状态是否按预期工作。
17. 为什么要在 React 中使用条件渲染？
18. 条件渲染通过根据加载、错误或成功状态显示特定 UI（而不是显示原始数据或错误）来改善用户体验。
19. React 中的后备组件是什么？
20. 如果无法显示主要内容，后备组件会提供替代 UI，例如错误或加载消息。它们提高了应用程序的弹性和用户体验。
21. 怎么样 axios.get 在示例中工作？
22. axios.get 向服务器发送 HTTP GET 请求以检索数据。在这里，它获取 JSON 格式的帖子数据以在组件中呈现。

React 应用程序的错误处理技巧

新开发商在 ReactJS 可以通过学习排除故障和解决意外应用程序问题等常见错误来获得信心。使用 React Query、正确格式化 Axios 响应以及设置准确的错误处理等解决方案可以避免许多陷阱。通过使用信息丰富的消息和使用后备组件来改善用户体验，您可以确保更顺畅的开发过程。

构建稳定的应用程序还涉及采用测试策略来验证组件在任何条件下都按预期运行。借助 Jest 和 React 测试库等工具，开发人员可以模拟网络响应并验证应用程序是否对成功和失败做出适当的反应。这种方法不仅增强了稳定性，而且还促进了更好的编码实践。 🚀