Semasa membina aplikasi, ralat tidak dapat dielakkan. Ia mungkin datang daripada API, UI atau dari beberapa tempat lain.
Sangat penting untuk mengendalikan ralat ini dengan anggun & mengekalkan UX yang baik walaupun terdapat ralat ini.
Sempadan Ralat ialah salah satu cara pengendalian ralat dalam React.
Untuk memahami perkara ini, mari kita fahami situasi sebelum pengenalan Sempadan Ralat.
Sebelum Had Ralat, ralat yang berlaku di dalam komponen akhirnya merebak & memecahkan UI atau memaparkan skrin putih.
Ini menyebabkan UX yang sangat teruk.
Sempadan Ralat membantu kami mengendalikan ralat tersebut & memaparkan UI sandaran dan bukannya memecahkan UI atau skrin putih yang dipaparkan.
React v16 secara rasmi memperkenalkan Sempadan Ralat.
Ia adalah Komponen Berasaskan Kelas yang boleh digunakan untuk membalut aplikasi anda.
Ia menerima UI sandaran untuk dipaparkan sekiranya aplikasi anda mempunyai ralat atau sebaliknya, ia hanya menjadikan komponen kanak-kanak untuk menyambung semula aliran biasa aplikasi anda.
Beginilah cara Dokumentasi React mengesyorkan menggunakannya,
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}
componentDidCatch(error, info) {
// Example "componentStack":
// in ComponentThatThrows (created by App)
// in ErrorBoundary (created by App)
// in div (created by App)
// in App
logErrorToMyService(error, info.componentStack);
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return this.props.fallback;
}
return this.props.children;
}
}
Ia tidak dapat menangkap ralat yang berlaku dalam,
Terdapat pakej npm yang dipanggil react-error-boundary yang merupakan pembalut di atas komponen Error Boundary tradisional.
Menggunakan pakej ini, kami dapat mengatasi semua isu yang dihadapi dalam komponen Sempadan Ralat tradisional.
Anda boleh membalut keseluruhan aplikasi anda atau anda boleh membalut komponen individu dengan .
Perincian pelaksanaan terpulang kepada anda.
Mari kita fahami cara menggunakannya.
import React from 'react';
import { ErrorBoundary } from "react-error-boundary";
const App = () => {
return <ErrorBoundary fallback={<div>Something went wrong</div>}>
/* rest of your component */
</ErrorBoundary>
}
Ini adalah contoh paling mudah menggunakan ErrorBoundary. Terdapat banyak lagi perpustakaan ini.
Mari cuba memahami API dengan senario yang berbeza.
1. Saya ingin menunjukkan UI sandaran generik untuk Ralat dalam Aplikasi
import React from 'react';
import { ErrorBoundary } from "react-error-boundary";
const App = () => {
return <ErrorBoundary fallback={<div>Something went wrong</div>}>
/* rest of your component */
</ErrorBoundary>
}
2. Saya ingin menunjukkan butiran ralat khusus dalam komponen sandaran saya
import React from 'react';
import { ErrorBoundary } from "react-error-boundary";
function fallbackRender({ error, resetErrorBoundary }) {
// Call resetErrorBoundary() to reset the error boundary and retry the render.
return (
<div role="alert">
<p>Something went wrong:</p>
<pre style={{ color: "red" }}>{error.message}
Daripada membuat sandaran atau sandaranRender, anda juga boleh menggunakan Komponen Reaksi.
import React from 'react';
import { ErrorBoundary } from "react-error-boundary";
const Fallback = ({ error, resetErrorBoundary }) => {
// Call resetErrorBoundary() to reset the error boundary and retry the render.
return (
<div role="alert">
<p>Something went wrong:</p>
<pre style={{ color: "red" }}>{error.message}
3. Saya mahu Log kesilapan saya
import React from 'react';
import { ErrorBoundary } from "react-error-boundary";
const logError = (error: Error, info: { componentStack: string }) => {
// Do something with the error, e.g. log to an external API
};
const Fallback = ({ error, resetErrorBoundary }) => {
// Call resetErrorBoundary() to reset the error boundary and retry the render.
return (
<div role="alert">
<p>Something went wrong:</p>
<pre style={{ color: "red" }}>{error.message}
4. Saya ingin menangkap ralat dalam pengendali acara & kod async
import { useErrorBoundary } from "react-error-boundary";
function Example() {
const { showBoundary } = useErrorBoundary();
const getGreeting = async(name) => {
try {
const response = await fetchGreeting(name);
// rest of your code
} catch(error){
// Show error boundary
showBoundary(error);
}
}
useEffect(() => {
getGreeting()
});
return <Whatever UI you want to render/>
}
ErrorBoundary ialah komponen pelanggan. Anda hanya boleh menghantar props yang boleh bersiri atau menggunakannya dalam fail yang mempunyai "pengguna klien"; arahan.
1. Apakah prop boleh bersiri?
Prop Serilzable bermakna ia boleh ditukar kepada strim bait dengan cara yang strim bait boleh ditukar kembali kepada prop asal.
Cara biasa untuk melakukannya dalam Javascript ialah JSON.stringify() & JSON.parse().
2. Cara menggunakan "use client"; arahan?
Sebut sahaja di bahagian atas fail
"use client";
Ada beberapa lagi variasi yang anda boleh gunakan. Tetapi artikel ini cukup bagus untuk membantu anda bermula.
Lihat dokumentasi penuh mereka di sini.
Sila beritahu saya dalam ulasan jika anda rasa ia membantu.
Selamat Pengekodan!
Atas ialah kandungan terperinci Menguasai Sempadan Ralat dalam Reaksi: Panduan untuk Pengendalian Ralat yang Berkesan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Apakah yang perlu saya lakukan jika iPad saya tidak boleh dicas?
Cara mendaftar untuk Alipay korporat
Apakah yang perlu saya lakukan jika saya terlupa kata laluan jalur lebar saya?
Tutorial untuk pendatang baru di Ouyi
Cara menggunakan fungsi max
rgb kepada rgb perenambelasan
Bagaimana untuk menyelesaikan menunggu peranti
Apakah perbezaan antara xls dan xlsx
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
