हमें त्रुटि सीमा घटकों का उपयोग कब करना चाहिए? केवल लापता प्रॉप्स और उस तरह के सामान के लिए?

उदाहरण के लिए, इस एपीआई फ़ेचिंग हुक की कल्पना करें:

const useFetch = () => {
   ...
    
   const [error, setError] = useState(null);
 
   const method = async () => {
     try {
        await api.fetchData();
     } catch(err) {
       setError(err);
     }
   };

   useEffect(() => {
     method();
   },[]);

   return { ..., error };
}

अब, एक घटक में, मैं बस करता हूं:

const MyComponent = () => {
   const { error } = useFetch();

   if (error) return <FallbackUI />;

   return <MainUI />;
}

क्या मैं सशर्त रूप से प्रतिपादन के बजाय इस स्थिति (एपीआई कॉल त्रुटियों) को संभालने के लिए त्रुटि सीमा घटक का उपयोग कर सकता हूं?

संपादित करें

और क्या होगा यदि मैं केवल एक फ़ॉलबैक UI प्रदर्शित करना चाहता हूं जब मेरी लाने वाली डेटा विधि विफल हो जाती है और कोई डेटा पहले पुनर्प्राप्त किया गया था?

कुछ इस तरह:

const { data, getMoreData, error } = useFetchPosts(); // data is stateful inside the hook
  
if (error && !data) return <FallbackUI />;

return <MainUI data={data} />;
1
Raul 7 जिंदा 2022, 15:38

1 उत्तर

सबसे बढ़िया उत्तर

मैंने अपनी परियोजनाओं में निम्नलिखित दृष्टिकोण का पालन किया है जो सभी हुक/कार्यात्मक घटक कार्यान्वयन हैं।

मैं https://github.com/bvaughn/react-error-boundary

import { ErrorBoundary } from "react-error-boundary";

<ErrorBoundary FallbackComponent={ErrorFallback}>
   <MyComponent />
</ErrorBoundary>   

//reject the promise so it gets bubbled up
const useFetch = () => {
   ...
    
   const [error, setError] = useState(null);
 
   const method = async () => {
     try {
        await api.fetchData();
     } catch(err) {
       // setError(err);
      return Promise.reject(err);
     }
   };

   useEffect(() => {
     method();
   },[]);

   return { ..., error };
}  


function ErrorFallback({ error }: { error: any }) {
  return (
    <>
      // you custom ui you'd like to return
    </>
  );
}  

संपादित करें:

मेरे पास आमतौर पर यह शीर्ष स्तर पर होता है इसलिए यह आम तौर पर सभी अनचाहे अपवादों के लिए एक पकड़ है। दूसरे शब्दों में, मैं अपने App.tsx को रूट index.tsx फ़ाइल में ErrorBoundary में लपेटता हूं। तो, मेरा कोड इस तरह दिखता है

 ...
 <ErrorBoundary FallbackComponent={ErrorFallback}>
    <SWRConfig ...>
       <React.StrictMode>
          <ScrollToTop></ScrollToTop>
             <App ... />
       </React.StrictMode>
      </SWRConfig>
  </ErrorBoundary>
   
1
Sangeet Agarwal 7 जिंदा 2022, 16:41
ओह thx इतना! मैंने यूआई को पुनरारंभ करने वाले ऐप के लिए ऐसा करने के लिए सोचा है (घटकों के सभी पेड़ लपेटकर)। लेकिन... ठेठ रिट्रीटर्स आदि के बारे में क्या? मेरा मतलब है, उदाहरण के लिए अगर मैं डेटा लाने वाले किसी अन्य घटक के अंदर एक रिट्रीयर घटक प्रस्तुत करना चाहता हूं, तो क्या मुझे इसके लिए एक विशिष्ट त्रुटि सीमा का उपयोग करना चाहिए? या सशर्त रूप से फ़ॉलबैक या घटक की सामग्री प्रस्तुत करना?
 – 
Raul
7 जिंदा 2022, 17:11
मेरा मतलब है, एक घटक की कल्पना करें जो 2 भ्रूण (उसी विधि का उपयोग करके) बनाता है। अगर मैं केवल एक फ़ॉलबैक यूआई प्रस्तुत करना चाहता हूं जब पहली बार विफल हो जाता है (दूसरे को अनदेखा कर रहा है), इसे त्रुटि सीमाओं या सशर्त प्रस्तुतकर्ताओं के साथ संभाला जाना चाहिए?
 – 
Raul
7 जिंदा 2022, 17:12
कुछ इस तरह: कॉन्स्ट {डेटा, त्रुटि} = यूज़फ़ेच (कुछ यूरी); अगर (! डेटा && त्रुटि) वापसी ;
 – 
Raul
7 जिंदा 2022, 17:13
1
एचएम .., निश्चित नहीं, सबसे अच्छा मैं आपको केंट डोड्स द्वारा इस लेख का संदर्भ दे सकता हूं kentcdodds.com/blog/…
 – 
Sangeet Agarwal
7 जिंदा 2022, 17:14