Question

我正在使用Typescript和React实现一个ErrorBoundary

TSLint显示错误Property 'componentStack' does not exist on type 'string'

这是我的代码实现

interface IState {
  info: ErrorInfo;
}

  public state = {
    errorInfo: "",
  };

  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    this.setState({
      errorInfo
    });
  }
  public render() {
    if (this.state.errorInfo) {
      return (
          <p>
            {this.state.errorInfo.componentStack}
          </p>
      );
    }
  }

Answer 1

您在这里隐式声明errorInfo为字符串：

public state = {
    errorInfo: "",
};

所以要打字输入errorInfo中存储的内容是string。 componentStack中不能存在string，这就是您收到错误消息的原因。

您应该声明：

public state: {
   errorInfo: string | { componentStack: Function, },
} = {
    errorInfo: "",
};

并完成对state对象内部内容的描述。

或者，如果您不知道，请使用any。

public state: any = {
    errorInfo: "",
};

无论如何，在componentStack确实为空的errorInfo的情况下，应在调用string之前对其进行测试。

if (this.state.errorInfo && typeof this.state.errorInfo.componentStack === 'Function') {
    {this.state.errorInfo.componentStack}
}

类型'string'.ts上不存在属性'componentStack'

1 个答案: