React：既存の状態オブジェクトでsetStateを使用できますか？

Question

私は10個のフィールドを持つ「状態」があるリアクトコンポーネント考えてみましょう：私のイベントハンドラの1つで

this.state = { 
    field1: 1, 
    field2: 2, 
    ... other fields 
    something: 'a' 
}; 

を、私は、単一の状態フィールドを更新するかを決定します。これを何らかの理由で悪い習慣のようにしていますか？

// state has 10 other properties not touched here, and I want them to 
// retain their existing values 
this.state.something = 'b'; 
this.setState(this.state); 

それとも私が行う必要があります。

this.setState({ 
    field1: this.state.field1, 
    field2: this.state.field2, 
    ... set other fields with current value 
    something: 'b' 
}); 

は、私はそれを行うことが必要である場合だけ疑問に思ったオブジェクトの状態をコピーすることが簡単にライブラリが存在している知っています。私はこれを試してみたが、それはうまくいくと付け加えなければならないが、私はオンラインで何の例も見なかったので、何か理由があるのか​​どうか疑問に思った。

Answer 1

あなたが行った突然変異を、後にsetState（）を呼び出すときに直接変更しないでください。それが 不変であるかのようにthis.stateを扱います。あなたは現在の状態をマージすることができ

const newState = Object.assign({}, this.state, { 
    something: 'b' 
}) 

this.setState(newState) 

またはクローンオブジェクトの

使用Object.assign：

this.setState({ 
    something: 'a', 
    something2: 'b', 
}) 

Answer 2

単一のフィールドを更新するには、このフィールドにオブジェクトを渡す必要があります。 Reactがそれをあなたのためにマージします。

this.setState({something: 'b'}) 

Answer 3

Stateのすべてのメンバーには、オプションでマークを付けることになります。

interface State { 
    field1?: number, 
    field2?: number, 
} 

これはあなたが考えるほど安全ではありません。 TypeScriptは、新鮮度のコンセプトを追加してこのパターンなどをサポートしました。

よりこれはここに覆われている：

https://basarat.gitbooks.io/typescript/content/docs/types/freshness.html#use-case--react-state