Question

我正在尝试为一个简单的应用程序添加错误边界。当我单击按钮时，屏幕上应该显示“出了点问题”。但在我的情况下，它不是那样显示的。据我所知{{1 }}自从我尝试使用控制台日志以来一直无法正常工作。在屏幕上运行此应用程序时，它显示错误：点击不正确

App.js

ErrorBoundary.js

Button.js


import './App.css';
import Button from './Components/Button';
import ErrorBoundary from './Components/ErrorBoundary';

function App() {
  return (
    <div className="App">
      
        <ErrorBoundary>
        <Button />
        </ErrorBoundary>
    </div>
  );
}

export default App;

ErrorBoundary.js

import React, { Component } from 'react';

class Button extends Component {

    constructor(props) {
        super(props);
        this.state = { error: null };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        console.log("Test Button")
        this.state = { error: true};
        throw new Error('Not a correct click');
    }


    render() {
        if (this.state.error) {
            return <h1>Caught an error!</h1>
        }
        return <button onClick={this.handleClick} style={{ color: 'white', background: 'blue', width: 200, height: 50 }}>Throw Error</button>
    }
}

export default Button;

Answer 1

一切正常，但根据docs：

错误边界不能捕获以下错误：

事件处理程序（learn more）
异步代码（例如setTimeout或requestAnimationFrame回调）
服务器端渲染
错误边界本身（而不是其子级）引发的错误

根据我的经验，错误边界会捕获render（）中的错误并阻止其在边界外传播。

错误边界背后的目的是避免半破坏的React渲染状态。

建议使用try/catch来捕获事件处理程序中的错误。

将throw移至Button.render应该可以帮助ErrorBoundary捕获示例中的错误：

handleClick() {
    console.log("Test Button")
    this.state = { error: true};
    // throw new Error('Not a correct click');
}

render() {
    if (this.state.error) {
        throw new Error('Not a correct click')
        return <h1>Caught an error!</h1>
    }
    return <button onClick={this.handleClick} style={{ color: 'white', background: 'blue', width: 200, height: 50 }}>Throw Error</button>
}

如何在响应中使用错误边界？

1 个答案: