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

あなたが行っているやり方は、typecriptがなくても問題になります。 この行は特に問題です。

this.state.isOpen = true; 

このコード行は、インクルードを強制しようとしているものtypescriptです物事を行うと正確のように反応はなく、直接、状態を変異しようとしています。

状態を変更する作業の1つの方法は、あなたのケースではこのように見える状態のコピーを作成することです。

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

これで状態のコピーが作成されました。ローカル変数を変更すると状態は変わりません。 stateは変更できませんので

Answer 2

エラーが

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

で発生します。あなたがコンパイル時にこれをキャッチしているTypeScriptを使用していると幸いです。

あなたがオブジェクトをマージすることができ

正しいコード：

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

より：https://basarat.gitbooks.io/typescript/content/docs/spread-operator.html