Усунення несправностей ReactJS Error: «Неочікувана помилка програми» з useQuery та Axios

ReactJS – Обробка «Неочікуваної помилки програми» в useQuery

Цей скрипт обробляє помилку за допомогою ReactJS і @tanstack/react-query для динамічного отримання даних. Він використовує правильну обробку помилок для оптимальної продуктивності та безпеки коду.

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 Fetch

Нижченаведені тести перевіряють відтворення компонентів і успішне використання 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 зробити в React?
2. The 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 у React Query?
10. queryKey унікально ідентифікує кожен запит, дозволяючи React Query кешувати результати та зменшувати непотрібні мережеві запити.
11. Чи можу я інакше обробляти помилки в React Query?
12. Так, onError зворотній дзвінок в useQuery можна налаштувати для обробки певних типів помилок, що полегшує налагодження.
13. Що є onError використовується для in 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

Нові розробники в ReactJS можна набути впевненості, навчившись усувати та вирішувати типові помилки, як-от несподівані проблеми з програмою. Такі рішення, як використання React Query, правильне форматування відповідей Axios і налаштування точної обробки помилок, дозволяють уникнути багатьох пасток. Покращуючи взаємодію з користувачем за допомогою інформативних повідомлень і використовуючи резервні компоненти, ви забезпечуєте більш плавний процес розробки.

Створення стабільних програм також передбачає застосування стратегій тестування для перевірки того, що компоненти поводяться належним чином у будь-яких умовах. За допомогою таких інструментів, як Jest і React Testing Library, розробники можуть моделювати відповіді мережі та перевіряти, чи програма належним чином реагує як на успіхи, так і на невдачі. Цей підхід не тільки зміцнює стабільність, але й сприяє кращим методам кодування. 🚀