Question

当我对此问题进行搜索时，只能找到直接在方法正文中某个地方修改this.state而不是使用this.setState()的问题。我的问题是我想按如下所示在构造函数中设置开始状态：

export default class Square extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      active: false
    };
  }

  public render() {
    ...
  }
}

应用程序无法启动，并出现以下编译错误：

Cannot assign to 'state' because it is a constant or a read-only property

这是因为在React.Component的定义中，我们有：

readonly state: null | Readonly<S>;

所以我不确定该怎么做。 JS中的官方react教程直接分配给this.state，并说在构造函数中这样做是可以接受的模式，但是我不知道如何使用TypeScript做到这一点。

Answer 1

考虑到Typescript 542f3c0在派生构造函数中分配父级的只读字段这一事实，这似乎是提交doesn't support中引入的@types/react的最新变化，效果不佳。

我建议回退到@types/react的先前版本。版本16.4.2似乎是不幸的更改之前的最后一个版本。

您可以通过删除^中的package.json来固定版本：

"devDependencies": {
  ...
  "@types/react": "16.4.2",

也请查看有关DefinitelyTyped github pull request page上有关此更改的讨论

Answer 2

在回滚之前（如@torvin的答案所建议），请通读https://github.com/DefinitelyTyped/DefinitelyTyped/pull/26813#issuecomment-400795486。

这并不意味着回归-解决方案是将state用作属性。比以前的方法（在构造函数中设置state）要好，因为：

您根本不需要构造函数
您不能忘记初始化状态（现在是编译时错误）

例如：

type Props {}

type State {
  active: boolean
}

export default class Square extends React.Component<Props, State> {
  public readonly state: State = {
    active: false
  }

  public render() {
    //...
  }
}

另一种方法：

type Props {}

const InitialState = {
  active: false
}

type State = typeof InitialState

export default class Square extends React.Component<Props, State> {
  public readonly state = InitialState

  public render() {
    //...
  }
}

Answer 3

由于state是组件的只读属性，因此无法逐字段进行设置，但是您仍然可以这样做：

constructor(props: MyProps) {
  super(props);
  this.state = {
    // include properties here
  }
}

无法分配给“状态”，因为它是常量或只读属性

3 个答案: