オブジェクトのプロパティを更新することは可能ですかsetState?
何かのようなもの：
this.state = {
jasper: { name: 'jasper', age: 28 },
}
私が試してみました：
this.setState({jasper.name: 'someOtherName'});
この：
this.setState({jasper: {name: 'someothername'}})
最初のものは構文エラーになり、2 番目のものは何も起こりません。何かアイデアはありますか?
ベストアンサー1
状態の更新は非同期操作状態オブジェクトを更新するには、アップデータ機能とsetState。
1- 最も単純なもの:
まず のコピーを作成し、jasperその中で変更を加えます。
this.setState(prevState => {
let jasper = Object.assign({}, prevState.jasper); // creating copy of state variable jasper
jasper.name = 'someothername'; // update the name property, assign a new value
return { jasper }; // return new object jasper object
})
を使用する代わりに、Object.assign次のように記述することもできます。
let jasper = { ...prevState.jasper };
2- 使用スプレッド構文:
this.setState(prevState => ({
jasper: { // object that we want to update
...prevState.jasper, // keep all other key-value pairs
name: 'something' // update the value of specific key
}
}))
注: 作成するのObject.assignはSpread Operator浅いコピーしたがって、ネストされたオブジェクトまたはオブジェクトの配列を定義している場合は、別のアプローチが必要になります。
ネストされた状態オブジェクトの更新:
状態を次のように定義したと仮定します。
this.state = {
food: {
sandwich: {
capsicum: true,
crackers: true,
mayonnaise: true
},
pizza: {
jalapeno: true,
extraCheese: false
}
}
}
pizza オブジェクトの extraCheese を更新するには:
this.setState(prevState => ({
food: {
...prevState.food, // copy all other key-value pairs of food object
pizza: { // specific object of food object
...prevState.food.pizza, // copy all pizza key-value pairs
extraCheese: true // update value of specific key
}
}
}))
オブジェクトの配列を更新しています:
ToDo アプリがあり、次の形式でデータを管理していると仮定します。
this.state = {
todoItems: [
{
name: 'Learn React Basics',
status: 'pending'
}, {
name: 'Check Codebase',
status: 'pending'
}
]
}
任意の ToDo オブジェクトのステータスを更新するには、配列に対してマップを実行し、各オブジェクトの一意の値をチェックします。一意の値の場合は、condition=true更新された値を持つ新しいオブジェクトを返し、そうでない場合は同じオブジェクトを返します。
let key = 2;
this.setState(prevState => ({
todoItems: prevState.todoItems.map(
el => el.key === key? { ...el, status: 'done' }: el
)
}))
提案:オブジェクトに一意の値がない場合は、配列インデックスを使用します。