ErrorBoundary 组件堆栈不显示我的组件的名称为什么以及如何修复它？

问题描述

请查看我在下面出现错误后得到的组件堆栈。我自己的组件写为“未知”。其他组件，如我在 fluentui 中使用的组件，以它们的名称显示，例如“堆栈”。为了能够理解问题的根源，我需要看到那些“未知”的真实姓名。我该怎么做？

Something went wrong.
TypeError: Unable to get property 'auth' of undefined or null reference

    in UnkNown
    in div (created by Stack)
    in Stack
    in div
    in UnkNown (created by Context.Consumer)
    in Route
    in UnkNown
    in Switch
    in div
    in Router (created by HashRouter)
    in HashRouter
    in div
    in UnkNown
    in div (created by FabricBase)
    in FabricBase (created by Context.Consumer)
    in StyledFabricBase
    in AppContainer
    in ErrorBoundary

如果需要，我会提供更多信息。这是我可能从 React 文档中复制的 ErrorBoundary 组件（这个副项目一直在进行中）。

import * as React from "react";

export class ErrorBoundary extends React.Component<any,any> {
  constructor(props) {
    super(props);
    this.state = { error: null,errorInfo: null };
  }

  componentDidCatch(error,errorInfo) {
    // Catch errors in any components below and re-render with error message
    this.setState({
      error: error,errorInfo: errorInfo
    });
    // You can also log error messages to an error reporting service here
  }

  render() {
    if (this.state.errorInfo) {
      // Error path
      return (
        <div>
          <h2>Something went wrong.</h2>
          <details style={{ whiteSpace: "pre-wrap" }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo.componentStack}
            <br/>
          </details>
        </div>
      );
    }
    // normally,just render children
    return this.props.children;
  }
}

我用它来包装我的应用：

const render = (Component,message) => {
  ReactDOM.render(
    <ErrorBoundary>
      <AppContainer>
        <Fabric>
          <Component
            title={title}
            isOfficeInitialized={isOfficeInitialized}
            message={message}
          />
        </Fabric>
      </AppContainer>
    </ErrorBoundary>,document.getElementById("container")
  );
};
...
render(App,message);

这是一个组件声明的例子。我一般使用功能组件和反应钩子：

export const Login: React.FC<any> = withRouter(props => {

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）