हमें त्रुटि सीमा घटकों का उपयोग कब करना चाहिए? केवल लापता प्रॉप्स और उस तरह के सामान के लिए?
उदाहरण के लिए, इस एपीआई फ़ेचिंग हुक की कल्पना करें:
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 उत्तर
मैंने अपनी परियोजनाओं में निम्नलिखित दृष्टिकोण का पालन किया है जो सभी हुक/कार्यात्मक घटक कार्यान्वयन हैं।
मैं 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>