属性 'isMounted' 在类型 'ErrorBoundary' 上不存在

Question

我正在练习打字稿，但我运行遇到了这个无法让我继续前进的错误：Property 'isMounted' does not exist on type 'ErrorBoundary'。

我有以下边界组件

// React
import React from 'react'

// Librarys
import ReportIcon from '@mui/icons-material/Report';

type ChildrenProp = {
   children: React.ReactNode,
}

type BoundaryState = {
  error: null|string
}

export default class ErrorBoundary extends React.PureComponent<ChildrenProp, BoundaryState> {
  constructor(props:ChildrenProp) {
    super(props)
    this.isMounted = false
    this.state = {
      error: null,
    }
  }

  componentDidMount() {
    this.isMounted = true
  }

  componentDidCatch(error) {
    this.isMounted && this.setState({ error: error.message })
  }

  componentWillUnmount() {
    this.isMounted = false
  }

  render() {
    if (this.state.error) {
      return (
        <div className="d-flex h-100 align-items-center justify-content-center  flex-column text-muted text-center">
          <ReportIcon className="mb-1 fs-4" />
          <h4 className="text-secondary">Application Error:</h4>
          <code className="col-10 mx-auto">{JSON.stringify(this.state.error)}</code>
        </div>
      )
    }

    return this.props.children
  }
}

我需要了解为什么 Typescript 会抛出此错误，this.isMounted 是此错误的原因，但我如何分配类型？。非常感谢

Answer 1

在组件中添加 public isMounted: boolean; 以声明它（public 是可选的）

export default class ErrorBoundary extends React.PureComponent<ChildrenProp, BoundaryState> {
  
  public isMounted: boolean;

  constructor(props:ChildrenProp) {
    ...
  }

属性 'isMounted' 在类型 'ErrorBoundary' 上不存在

Property 'isMounted' does not exist on type 'ErrorBoundary'

typescript

reactjs

react-typescript