Reactでオブジェクトを変更する方法

オブジェクト属性を変更するための React メソッド: 1. 状態でオブジェクトを定義する; 2. obj オブジェクトに name 属性と age 属性を動的に追加し、割り当てを初期化する; 3. "Object.assign()" メソッドを使用するオブジェクト全体を変更します。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

react でオブジェクトを変更するにはどうすればよいですか?

react setState はオブジェクトのプロパティを変更します

state で定義されたオブジェクトのプロパティを変更する必要があるため、setState は state のオブジェクトを直接変更できないことがわかりました。プロパティが操作されます。

それではどうすればいいでしょうか？焦らず、ゆっくり聞いてください (あなたの戯言はまったく聞きたくないのですが...)

まず、次の状態のオブジェクトを定義します:

this.state = {
obj: {}
}

次のステップは、オブジェクト obj に名前と年齢属性を動的に追加し、割り当てを初期化することです。setState の特性に従って、obj 属性を直接変更できるため、新しいオブジェクト object を作成し、それに coverObj という名前を付けます。 coverObj に名前、年齢属性、初期値を追加すると、取得した obj オブジェクトは coverObj と同じになります。

let coverObj = {};
coverObj['name'] = '小明',
coverObj['age'] = 20,
this.setState({
obj: coverObj
})

上記の方法では、実際には coverObj を obj に直接上書きすることになりますが、obj 自体が他の属性を持っている場合、他の属性が失われることになります。

this.state = {
obj: {hobby: '游泳'}
}
let coverObj = {};
coverObj['name'] = '小明',
coverObj['age'] = 20,
this.setState({
obj: coverObj
})
// 打印出来的obj是没有hobby属性的

したがって、オブジェクト全体を変更するには、Object.assign() メソッドを使用する必要があります。

let coverObj = {};
coverObj['name'] = '小明',
coverObj['age'] = 20,
let data2 = Object.assign(this.state.obj, coverObj)   // 1
// let data2 = Object.assign({}，this.state.obj, coverObj)  // 2
this.setState({
obj: data2
})

注 1 および 2: 上記 2 つのメソッドの戻り値同じだ。 Object.assign の構文は、最初のパラメータをターゲット オブジェクトとして扱い、ターゲット オブジェクトに基づいて動作するため、つまり元のターゲット オブジェクトが変更されるため、一般に Object.assign を使用する場合、ターゲットは次のように設定されます。空のオブジェクトは、新しいオブジェクトを返すのと同じです。

次に、属性名の値を「Little Red」に変更します。変更する必要がある属性が既に obj に存在し、属性名が obj の属性名と一致していることが前提となります。変更された値. オブジェクトの属性名を変更する ある属性:

let coverObj = {};
coverObj['name'] = '小明',
coverObj['age'] = 20,
let data2 = Object.assign({}，this.state.obj,coverObj, {name: '小红'}) ;
this.setState({
obj: data2
})
// 打印的 obj: {hobby: '游泳', name: '小红', age: 20}

これで、オブジェクトの属性値を変更する目的は達成されました。

Object.assign 関連:

Object.assign() メソッドは、1 つ以上のソース オブジェクトからターゲット オブジェクトにすべての列挙可能なプロパティの値を割り当てるために使用されます。ターゲットオブジェクトを返します。

構文: Object.assign(target, ...sources)

setState() について次の 3 つのことを知っておく必要があります:

1. State を直接変更しないでください。 setState():

2 を使用する必要があります。状態の更新は非同期である可能性があります

3。状態の更新はマージされます

推奨される学習: "react ビデオ チュートリアル》

以上がReactでオブジェクトを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。