質問

でオブジェクトのプロパティを更新することは可能でしょうか？ setState ?

のようなものです。

this.state = {
   jasper: { name: 'jasper', age: 28 },
}

試してみました。

this.setState({jasper.name: 'someOtherName'});

とこれを

this.setState({jasper: {name: 'someothername'}})

最初のものはシンタックスエラーになり、2番目はただ何もしません。何かアイデアはありますか？

解決方法は？

状態の更新は 非同期処理 というように、状態オブジェクトを更新するために アップデータ機能 と 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 のみが作成されます。 シャローコピー そのため、ネストしたオブジェクトやオブジェクトの配列が定義されている場合は、別のアプローチが必要になります。

ネストされたステートオブジェクトを更新する。

というようにstateを定義したとします。

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 オブジェクトの状態を更新するには、配列に対して map を実行し、各オブジェクトの一意な値をチェックします。 condition=true であれば、更新された値を持つ新しいオブジェクトを返し、そうでなければ同じオブジェクトを返します。

let key = 2;
this.setState(prevState => ({

  todoItems: prevState.todoItems.map(
    el => el.key === key? { ...el, status: 'done' }: el
  )

}))

提案します。 オブジェクトが一意な値を持たない場合、配列のインデックスを使用します。