ReactJS பிழை சரிசெய்தல்: யூஸ் க்யூரி மற்றும் ஆக்சியோஸ் உடன் "எதிர்பாராத பயன்பாட்டுப் பிழை"

ReactJS - useQuery இல் "எதிர்பாராத பயன்பாட்டுப் பிழை"யைக் கையாளுதல்

இந்த ஸ்கிரிப்ட் பயன்படுத்தும் பிழையைக் கையாளுகிறது ரியாக்ட்ஜேஎஸ் மற்றும் @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;

பின்-இறுதி ஸ்கிரிப்ட்: சோதனைக்கு ஒரு மாதிரி ஆக்சியோஸ் எண்ட்பாயிண்ட் அமைத்தல்

இந்த ஸ்கிரிப்ட் பயன்படுத்துகிறது 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();
});

சிறந்த எதிர்வினை வினவல் & அடிக்கடி கேட்கப்படும் கேள்விகளைக் கையாளுவதில் பிழை

1. என்ன செய்கிறது useQuery வினையில் செய்யவா?
2. தி useQuery ஹூக் பெறுதல், தேக்ககங்கள் மற்றும் ரியாக்ட் கூறுகளில் ஒத்திசைவற்ற தரவைப் புதுப்பித்தல், தானாக ஏற்றுதல், பிழை மற்றும் வெற்றி நிலைகளைக் கையாளும்.
3. "ஆப்ஜெக்ட்கள் ரியாக்ட் குழந்தையாக செல்லுபடியாகாது" என்ற பிழையை ஏன் ரியாக்ட் காட்டுகிறது?
4. ஒரு பொருள் நேரடியாக குழந்தை உறுப்பாக அனுப்பப்படும் போது இந்த பிழை ஏற்படுகிறது. எதிர்வினைக்கு உரை, எண்கள் அல்லது எதிர்வினை கூறுகள் குழந்தைகளாக தேவை, பொருள்கள் அல்ல.
5. எப்படி செய்கிறது queryFn ரியாக் வினலில் வேலை செய்யவா?
6. queryFn தரவு எவ்வாறு பெறப்படுகிறது என்பதைக் குறிப்பிடுகிறது useQuery. API கோரிக்கைகளை உருவாக்குவதற்கு இது பொறுப்பு axios.get.
7. ஏன் பயன்படுத்த வேண்டும் error.message பிழைகளைக் காண்பிப்பதற்காகவா?
8. பயன்படுத்தி error.message "ஏதோ தவறாகிவிட்டது" போன்ற தெளிவற்ற அறிக்கைகளை விட விரிவான, பயனர் நட்பு பிழை செய்திகளை வழங்குகிறது, இது சரிசெய்தலுக்கு உதவுகிறது.
9. பங்கு என்ன queryKey எதிர்வினை வினவில்?
10. queryKey ஒவ்வொரு வினவலையும் தனித்துவமாக அடையாளம் கண்டு, ரியாக் க்வெரி முடிவுகளை தேக்ககப்படுத்தவும் தேவையற்ற நெட்வொர்க் கோரிக்கைகளை குறைக்கவும் அனுமதிக்கிறது.
11. எதிர்வினை வினவலில் பிழைகளை நான் வித்தியாசமாக கையாள முடியுமா?
12. ஆம், தி onError திரும்ப அழைக்க useQuery குறிப்பிட்ட பிழை வகைகளைக் கையாள தனிப்பயனாக்கலாம், பிழைத்திருத்தத்தை எளிதாக்குகிறது.
13. என்ன onError உபயோகத்தில் பயன்படுத்தப்படும்Query?
14. onError உள்ளே useQuery வினவலின் போது பிழை ஏற்படும் போது இயங்கும் ஒரு கால்பேக் ஆகும். இது பிழை தகவலை மாறும் வகையில் பதிவு செய்ய அல்லது காண்பிக்க உங்களை அனுமதிக்கிறது.
15. எதிர்வினை வினவல் கூறுகளை எவ்வாறு சோதிப்பது?
16. போன்ற நூலகங்களைப் பயன்படுத்துங்கள் Jest மற்றும் React Testing Library ஏபிஐ பதில்களை உருவகப்படுத்தவும், ஏற்றுதல், பிழை மற்றும் வெற்றி நிலைகள் எதிர்பார்த்தபடி செயல்படுகிறதா எனச் சரிபார்க்கவும்.
17. ரியாக்டில் நான் ஏன் நிபந்தனை ரெண்டரிங் பயன்படுத்த வேண்டும்?
18. நிபந்தனை ரெண்டரிங், மூல தரவு அல்லது பிழைகளைக் காட்டுவதற்குப் பதிலாக ஏற்றுதல், பிழை அல்லது வெற்றி நிலைகளின் அடிப்படையில் குறிப்பிட்ட UI ஐக் காண்பிப்பதன் மூலம் பயனர் அனுபவத்தை மேம்படுத்துகிறது.
19. ரியாக்டில் ஃபால்பேக் கூறுகள் என்றால் என்ன?
20. முக்கிய உள்ளடக்கத்தைக் காட்ட முடியாவிட்டால், பிழை அல்லது செய்திகளை ஏற்றுதல் போன்ற மாற்று UIஐ ஃபால்பேக் கூறுகள் வழங்குகின்றன. அவை பயன்பாட்டின் பின்னடைவு மற்றும் பயனர் அனுபவத்தை மேம்படுத்துகின்றன.
21. எப்படி செய்கிறது axios.get உதாரணத்தில் வேலை செய்யவா?
22. axios.get தரவை மீட்டெடுக்க HTTP GET கோரிக்கையை சர்வருக்கு அனுப்புகிறது. இங்கே, இது கூறுகளை வழங்குவதற்காக JSON வடிவத்தில் இடுகைகளின் தரவைப் பெறுகிறது.

எதிர்வினை பயன்பாடுகளுக்கான உதவிக்குறிப்புகளைக் கையாள்வதில் பிழை

புதிய டெவலப்பர்கள் ரியாக்ட்ஜேஎஸ் எதிர்பாராத பயன்பாட்டுச் சிக்கல்கள் போன்ற பொதுவான பிழைகளைச் சரிசெய்து தீர்க்கக் கற்றுக்கொள்வதன் மூலம் நம்பிக்கையைப் பெறலாம். React Query ஐப் பயன்படுத்துதல், Axios மறுமொழிகளை சரியாக வடிவமைத்தல் மற்றும் துல்லியமான பிழை கையாளுதலை அமைத்தல் போன்ற தீர்வுகள் பல ஆபத்துக்களைத் தவிர்ப்பதை சாத்தியமாக்குகின்றன. தகவல் தரும் செய்திகள் மூலம் பயனர் அனுபவத்தை மேம்படுத்துவதன் மூலமும், ஃபால்பேக் கூறுகளைப் பயன்படுத்துவதன் மூலமும், நீங்கள் ஒரு மென்மையான வளர்ச்சி செயல்முறையை உறுதிசெய்கிறீர்கள்.

நிலையான பயன்பாடுகளை உருவாக்குவது, எந்த நிலையிலும் கூறுகள் எதிர்பார்த்தபடி செயல்படுகின்றன என்பதை சரிபார்க்க சோதனை உத்திகளைப் பின்பற்றுவதை உள்ளடக்கியது. ஜெஸ்ட் மற்றும் ரியாக்ட் டெஸ்டிங் லைப்ரரி போன்ற கருவிகள் மூலம், டெவலப்பர்கள் நெட்வொர்க் பதில்களை உருவகப்படுத்தலாம் மற்றும் ஆப்ஸ் வெற்றி மற்றும் தோல்விகள் இரண்டிற்கும் சரியான முறையில் செயல்படுகிறதா என்பதை சரிபார்க்கலாம். இந்த அணுகுமுறை நிலைத்தன்மையை வலுப்படுத்துவது மட்டுமல்லாமல் சிறந்த குறியீட்டு நடைமுறைகளையும் வளர்க்கிறது. 🚀