Reactjs?錯誤邊界優(yōu)雅處理方法demo

更新時間：2022年12月13日 15:49:54 作者：Jovie

這篇文章主要為大家介紹了Reactjs?錯誤邊界優(yōu)雅處理方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

每當你的react應用在任何react功能或類組件中遇到任何javascript錯誤時，都會破壞整個應用，這對你的終端用戶來說是一種糟糕的體驗。React 16 引入了錯誤邊界 ，以擺脫你的應用程序中的這種糟糕體驗。有了錯誤邊界 ，你現(xiàn)在可以優(yōu)雅地處理并讓用戶知道，每當你的應用程序遇到錯誤時，就會出現(xiàn)問題。

在這篇文章中，我們將學習如何通過實現(xiàn)錯誤邊界來處理這些錯誤，并看看它們的作用。

首先，在vs code或任何其他IDE中創(chuàng)建一個新的react應用程序，我個人更喜歡VS Code。

什么是錯誤邊界？

錯誤邊界也是反應組件，它可以幫助你捕捉被錯誤邊界包裹的組件中的錯誤，并顯示一個回退 UI（當捕捉到錯誤時顯示的UI，而不是崩潰的應用程序）。

錯誤邊界可以捕捉

渲染錯誤
生命周期錯誤
構造器錯誤

錯誤邊界不能捕捉

事件處理程序中的錯誤
異步代碼中的錯誤
服務器端渲染中的錯誤
錯誤邊界中的錯誤 (Duhh!)

錯誤邊界的實現(xiàn)

要使一個類組件成為錯誤邊界組件，你只需要定義**靜態(tài)的getDerivedStateFromError()和componentDidCatch()**生命周期方法。

讓我們創(chuàng)建一個新的類組件并使其成為一個錯誤邊界，讓我們滾動

export default class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null, errorInfo: null };
  }
  componentDidCatch(error, errorInfo) {
    // use lifecycle to catch errors in any components below and re-render fallback UI
    this.setState({
      error: error,
      errorInfo: errorInfo,
    });
  }
  render() {
    if (this.state.errorInfo) {
      // Fallback UI
      return (
        <div>
          <h2>Something went wrong.</h2>
          <details style={{ whiteSpace: "pre-wrap" }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }
    // without error render normally in happy flow 
    return this.props.children;
  }
}

用錯誤邊界包住組件

現(xiàn)在我們可以用錯誤邊界來包裝我們的整個應用程序，或者包裝我們的子組件，以便在特定的組件上顯示后退的用戶界面，讓我們看看這個動作吧

// Wrapping child component
<ErrorBoundary>
 <ComponentThatThrowsError />
</ErrorBoundary>

// Wrapping our entire application
<ErrorBoundary>
 <App />
</ErrorBoundary>

拋出一個錯誤

讓我們在useEffect中拋出一個錯誤，看看我們的錯誤邊界是否能抓住。

const ComponentThatThrowsError = () => {
  const [counter, setCounter] = useState(0);
  useEffect(() => {
    if (counter === 5) {
      throw new Error("Something went wrong");
    }
  }, [counter]);
  return (
    <div>
      <p>Parent Component Counter</p>
      <button
        className="btn"
        onClick={() => {
          setCounter(counter + 1);
        }}
      >
        {counter}
      </button>
    </div>
  );
};

當計數(shù)器的值等于5時，我們就拋出了一個錯誤。