2017-05-24 14 views
0

getから応答としてオブジェクトを取得します。reactjs状態オブジェクト内のオブジェクト属性を変更する

今、私はこのような状態のVAR(オブジェクト)にオブジェクトを割り当てる:

this.setState({editData: response.data}) 

は、このオブジェクト内の値を変更する方法はありますか?

私はこのような何かについて考えた:

this.setState({editData.[var]: [value]}) 

おかげ

答えて

3

は、まずあなたが直接、状態オブジェクトを変異させるべきではありませんことを覚えておく必要があります。ですから、まず状態オブジェクトのコピーを作成し、コピーを変更してください。次に、このコピーを状態として設定します。あなたはそれを達成するためにスプレッドの構文を使用できます。

let state = { 
 
    editData: { 
 
    age: 22 
 
    } 
 
}; 
 

 
let age = "age"; 
 
let stateCopy = {editData: {...state.editData, [age]: 100}}; 
 

 
console.log(state); 
 
console.log(stateCopy);

+0

あなたは状態に基づいて状態を変更しているので、:

this.setState((prevState) => ({editData: {...prevState.editData, [var]: value}})); 

ここではそのソースオブジェクトが変異されていない示す例を働いています'setState'でコールバックを使わなければなりません。オブジェクトに直接渡すことはできません。したがって: 'this.setState(prev => {{prev.editData、[var]:value}))); ' –

+0

なぜですか? 'this.state'を使って現在の状態を読み取ることができます。 –

+0

'setState'は非同期プロセスを待ち行列に入れるためです。これについては 'setState'(ドキュメンテーションの中の)(https://facebook.github.io/react/docs/react-component.html#setstate)の議論で公正なビットがあります。 * "この形式のsetState()も非同期であり、同じサイクル中の複数の呼び出しをまとめてバッチ処理することができます。" *上記では、 'editData'の浅いコピーを作成するので、現在の状態を使用して新しい状態を作成するため、コールバックを使用する必要があります。 –

関連する問題