reactjs - React 中子组件的错​​误边界

Question

我在应用程序的根目录有一个带有错误边界的 React 应用程序。

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <CustomErrorBoundary>
                <App />
            </CustomErrorBoundary>
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
)

// CustomErrorBoundary
import { Component } from 'react'

class ErrorBoundary extends Component {
    constructor() {
        super()
        this.state = { error: false, errorMessage: '' }
    }

    static getDerivedStateFromError(error) {
        return { error: true, errorMessage: error.toString() }
    }

    componentDidCatch(error, errorInfo) {
        console.log({ error, errorInfo })
    }

    render() {
        const { error, errorMessage } = this.state
        const { children } = this.props

        return error ? (
            <h2> There is an error {errorMessage}. {error} </h2>
        ) : (
            children
        )
    }
}

export default CustomErrorBoundary

我的问题是<CustomErrorBoundary>针对整个应用程序，因此任何后代都会抛出错误，但根应用程序会捕获，并且整个 UI 都会出现错误。

一种解决方案是为单个组件添加错误边界：

<CustomErrorBoundary>
   <ChildA>
</CustomErrorBoundary>

但这会导致代码不干净。我想要使​​用第一个片段但只为该子组件呈现错误 UI 的东西。另外，我希望保持 redux 状态。

标签： reactjserror-handlingreact-reduxreact-error-boundary