0

请查看下面出现错误后我得到的组件堆栈。我自己的组件写为“未知”。像我在 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 => {
4

0 回答 0