Устранение ошибки ReactJS: «Неожиданная ошибка приложения» с помощью useQuery и Axios

ReactJS – обработка «неожиданной ошибки приложения» в useQuery

Этот скрипт обрабатывает ошибку, используя РеактJS и @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 с помощью шутка и Библиотека тестирования 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();
});

Часто задаваемые вопросы по запросам и обработке ошибок React

1. Что значит useQuery делать в Реакте?
2. useQuery перехват извлекает, кэширует и обновляет асинхронные данные в компонентах 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. Используйте библиотеки, такие как Jest и React Testing Library для имитации ответов API и проверки правильности работы состояний загрузки, ошибок и успеха.
17. Почему мне следует использовать условный рендеринг в React?
18. Условный рендеринг улучшает взаимодействие с пользователем, отображая определенный пользовательский интерфейс на основе состояний загрузки, ошибки или успеха, а не показывая необработанные данные или ошибки.
19. Что такое резервные компоненты в React?
20. Резервные компоненты предоставляют альтернативный пользовательский интерфейс, например сообщения об ошибках или загрузке, если основной контент не может быть отображен. Они улучшают устойчивость приложений и удобство работы с ними.
21. Как axios.get работа в примере?
22. axios.get отправляет HTTP-запрос GET на сервер для получения данных. Здесь он извлекает данные сообщений в формате JSON для рендеринга в компоненте.

Советы по обработке ошибок для приложений React

Новые разработчики в РеактJS можно обрести уверенность, научившись устранять и устранять распространенные ошибки, например неожиданные проблемы с приложениями. Такие решения, как использование React Query, правильное форматирование ответов Axios и настройка точной обработки ошибок, позволяют избежать многих ошибок. Улучшая взаимодействие с пользователем с помощью информативных сообщений и используя резервные компоненты, вы обеспечиваете более плавный процесс разработки.

Создание стабильных приложений также предполагает принятие стратегий тестирования для проверки того, что компоненты ведут себя должным образом в любых условиях. С помощью таких инструментов, как Jest и библиотека тестирования React, разработчики могут моделировать реакции сети и проверять, правильно ли приложение реагирует как на успехи, так и на неудачи. Такой подход не только повышает стабильность, но и способствует улучшению практики кодирования. 🚀