如何使用React TypeScript 2.0更改状态？

Question

对于由React和TypeScript创建的这样一个小组件。

interface Props {
}

interface State {
  isOpen: boolean;
}

class App extends React.Component<Props, State> {

  constructor(props: Props) {
    super(props);
    this.state = { 
      isOpen: false
    };
  }

  private someHandler() {
    // I just want to turn on the flag. but compiler error occurs.
    this.state.isOpen = true;
    this.setState(this.state);
  }

}

当我尝试将TypeScript 1.8升级到2.0时，我得到了如下编译器错误。

error TS2540: Cannot assign to 'isOpen' because it is a constant or a read-only property.

我想也许是因为这种变化造成的。

• https://github.com/Microsoft/TypeScript/wiki/FAQ#why-are-getters-without-setters-not-considered-read-only

所以我只想打开旗帜。

我该怎么办？有谁知道解决方法？

感谢。

更新

快速解决方法就像下面这样做。

this.setState({ isOpen: true });

Answer 1

即使没有打字稿，你这样做也会成为一个问题。 这条线特别是一个问题。

this.state.isOpen = true;

这行代码试图直接改变状态，这不是做事的反应方式，而是确切地说是什么打字稿试图强制执行。

使用更改状态的一种方法是制作一个状态的副本，在您的情况下看起来像这样;

let state = Object.assign({}, this.state)
state.isOpen = true;

现在您拥有状态副本，并且在更改本地变量时，您不会更改状态。

Answer 2

中发生错误

  private someHandler() {
    // I just want to turn on the flag. but compiler error occurs.
    this.state.isOpen = true;
    this.setState(this.state);
  }

因为state不可变。幸运的是你正在使用TypeScript在编译时为你捕获这个。

更正代码

您可以合并对象：

  private someHandler() {
    this.setState({...this.state, isOpen: true});
  }

更多：https://basarat.gitbooks.io/typescript/content/docs/spread-operator.html

Answer 3

当您使用基于类的组件时，使用setState()方法设置状态会将isOpen属性合并到现有状态。这样就可以了：

this.setState({isOpen: true});