亲宝软件园·资讯

展开

Reactjs 错误边界优雅处理方法demo

Jovie 人气:0

正文

每当你的react应用在任何react功能或类组件中遇到任何javascript错误时,都会破坏整个应用,这对你的终端用户来说是一种糟糕的体验。React 16 引入了错误边界 ,以摆脱你的应用程序中的这种糟糕体验。有了错误边界 ,你现在可以优雅地处理并让用户知道,每当你的应用程序遇到错误时,就会出现问题

在这篇文章中,我们将学习如何通过实现错误边界来处理这些错误 ,并看看它们的作用。

首先,在vs code或任何其他IDE中创建一个新的react应用程序,我个人更喜欢VS Code。

什么是错误边界?

错误边界也是反应组件,它可以帮助你捕捉被错误边界包裹的组件中的错误,并显示一个回退 UI(当捕捉到错误时显示的UI,而不是崩溃的应用程序)。

错误边界可以捕捉

错误边界不能捕捉

错误边界的实现

要使一个类组件成为错误边界组件,你只需要定义**静态的getDerivedStateFromError()componentDidCatch()**生命周期方法。

让我们创建一个新的类组件并使其成为一个错误边界,让我们滚动

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;
  }
}

用错误边界包住组件

现在我们可以用错误边界来包装我们的整个应用程序,或者包装我们的子组件,以便在特定的组件上显示后退的用户界面,让我们看看这个动作吧

// 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>
  );
};

当计数器的值等于5时,我们就抛出了一个错误。

晃动你的叔叔

我们可以看到,一旦子组件的计数器达到5,应用程序就会为该组件渲染回退的用户界面,而当主错误边界捕捉到一个错误时,它就会渲染出白色的屏幕,显示出出错的情况

总结

我们在这一章中讲了很多,我希望这对你来说不算太多。你学到了如何创建错误边界,以及为什么和在哪里使用它们。它们如何使你的应用程序的体验更好。

加载全部内容

相关教程
猜你喜欢
用户评论