ReactJS エラーのトラブルシューティング: useQuery および Axios での「予期しないアプリケーション エラー」

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 フェッチの成功を検証します。 冗談 そして 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. の 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 Reactクエリでは？
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. 条件付きレンダリングは、生のデータやエラーを表示するのではなく、読み込み、エラー、または成功の状態に基づいて特定の UI を表示することにより、ユーザー エクスペリエンスを向上させます。
19. React のフォールバック コンポーネントとは何ですか?
20. フォールバック コンポーネントは、メイン コンテンツが表示できない場合に、エラーやメッセージの読み込みなどの代替 UI を提供します。これらにより、アプリの復元力とユーザー エクスペリエンスが向上します。
21. どのようにして axios.get 例で動作しますか？
22. axios.get HTTP GET リクエストをサーバーに送信してデータを取得します。ここでは、コンポーネントでレンダリングするために JSON 形式で投稿データを取得します。

React アプリのエラー処理のヒント

新しい開発者 ReactJS アプリケーションの予期せぬ問題など、一般的なエラーのトラブルシューティングと解決方法を学ぶことで、自信を得ることができます。 React Query の使用、Axios 応答の適切なフォーマット、正確なエラー処理の設定などのソリューションにより、多くの落とし穴を回避できます。有益なメッセージとフォールバック コンポーネントを使用してユーザー エクスペリエンスを向上させることで、開発プロセスがよりスムーズになります。

安定したアプリケーションを構築するには、コンポーネントがどのような条件でも期待どおりに動作するかを検証するためのテスト戦略の導入も必要になります。 Jest や React Testing Library などのツールを使用すると、開発者はネットワーク応答をシミュレートし、アプリが成功と失敗の両方に適切に反応することを検証できます。このアプローチは、安定性を強化するだけでなく、より良いコーディング方法を促進します。 🚀