如何使用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; 

现在你有一个状态的副本，当你改变你的本地变量时，你不会改变状态。发生在

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

Answer 2

错误，因为state不可变。幸运的是，您正在使用TypeScript，它在编译时为您着想。

正确的代码

您可以合并的对象：

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

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