ReactJS：如何在父组件中显示子组件错误

Question

如果子元素发生错误，我想在我的父 React 组件上显示一条错误消息。

在这种情况下，错误将是捕获 apollo 突变调用，例如您在 GrandChild 组件中看到的那样。

当然，我可以在父组件中创建一个函数，为错误设置一个状态值，并将该函数传递给每个子组件、孙组件等。但由于我的结构有点复杂，这意味着很多工作。这就是为什么我想到使用反应错误边界。但这是正确的用例吗？

因为我使用的是 nextJS，所以在开发模式下每个 throw Error 都会显示一个错误堆栈跟踪，所以不可能将错误显示为消息

Parent.js

export class Parent extends Component {
  render () {
    return (
      { /* if there is an error in any child component, it should be displayed here */
        this.props.error &&
        <Message>{error}</Message>
      }
      <Child {...props} />
    )
  }
}

GrandChild.js

class GrandChild extends Component {
  doAnything () {
    return this.props.assumeToFail({
      variables: { id: '123' }
    }).catch(error => {
      console.error(error) // <-- this error should be given back to parent
      throw new Error('fail') // <-- should I throw the error or call a custom function?
    })
  }

  render () {
    return (
      <Button onClick={this.doAnything().bind(this)}>anything</Button>
    )
  }
}

export default graphql(exampleMutation, { name: 'assumeToFail' })(GrandChild)

要在我的 nextJS 应用程序中使用错误边界，我只需添加

_app.js

class MyApp extends App {
  componentDidCatch (error, errorInfo) {
    console.log('CUSTOM ERROR HANDLING', error)
    // How do I get the error down to 'Component' in render()?
    super.componentDidCatch(error, errorInfo)
  }

  render () {
    const { Component, pageProps, apolloClient } = this.props
    return <Container>
      <ApolloProvider client={apolloClient}>
        <Component {...pageProps} />
      </ApolloProvider>
    </Container>
  }
}

到我的 _app.js 文件。但我不确定这是否是要走的路......而且我不知道如何将错误归结为 Component.

Answer 1

实现这一点的最佳方法是使用像 redux or fluxible 这样的 React 状态管理。如果您正在使用 React 状态管理，那么您可以通过从 child.js 发送消息并连接到 parent.js 中的 redux 存储来调用操作，以轻松获取错误消息。
如果您决定像您所描述的那样使用函数，您可以将函数传递给 children 并让 children 调用该函数。

Parent.js

export class Parent extends Component {
  state = {
    error: null,
  }

  render () {
    return (
      { /* if there is an error in any child component, it should be displayed here */
        this.state.error &&
        <Message>{this.state.error}</Message>
      }
      <Child
        {...props}
        defineError={(errMsg) => setState({ error: errMsg })}
      />
    )
  }
}

GrandChild.js

import PropTypes from 'prop-types';

class GrandChild extends Component {
  static propTypes = {
    defineError: PropTypes.func,    
  }

  doAnything () {
    return this.props.assumeToFail({
      variables: { id: '123' }
    }).catch(error => {
      this.props.defineError(error);
      console.error(error) // <-- this error should be given back to parent
      throw new Error('fail') // <-- should I throw the error or call a custom function?
    })
  }

  render () {
    return (
      <Button onClick={this.doAnything().bind(this)}>anything</Button>
    )
  }
}

export default graphql(exampleMutation, { name: 'assumeToFail' })(GrandChild)

ReactJS：如何在父组件中显示子组件错误

ReactJS: How to display an child component error in parent component

javascript

reactjs

next.js