1

我正在尝试ErrorBoundary通过遵循文档来实现，并且到目前为止是成功的。

我使用了文档中提到的相同方法

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

我无法完成的是MyWidget在. 我想将子组件状态连同错误一起发送到服务器，以便更容易调试。ErrorBoundarycomponentDidCatchErrorBoundary

到目前为止我尝试过的是refs使用

<ErrorBoundary childrenRef={this.refs["myWidget"]}>
   <MyWidget ref="myWidget"/>
</ErrorBoundary>

然后在我的子组件中，我创建了一个getState简单地返回自己状态的函数，然后在里面ErrorBoundary我使用提供的ref像

render() {
    if (this.props.childrenRef) {
      console.log(this.props.childrenRef.decoratedRef.current.getState());
    }
    if (this.state.errorInfo) {
      // Error path
      console.log(this.state.errorInfo);
      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>
      );
    }
    // Normally, just render children
    return this.props.children;
  }

它完成了这项工作并返回子组件的状态，但是当我尝试使用相同的代码来使用内部的 refs 获取状态时，这componentDidCatch会this.props.childrenRef.decoratedRef.current导致引用子组件本身。nullcurrentnull

有没有更好的方法来实现这一点？难道我做错了什么？

4

0 回答 0