特定のインデックスによる配列オブジェクトの更新

Question

toggleGroceryCompletenessメソッドでgroceriesアイテム（completed〜True）を更新するにはどうすればよいですか？

私はthis.setState({groceries[groceryIndex]:{completed:true});

constructor(props) { 
    super(props); 
    this.state = { 
     groceries: [ 
     { 
      name: "Apples", 
      completed: false 
     } 
     ], 
     newGroceryName: "" 
    }; 

    toggleGroceryCompleteness(groceryIndex) { 
    console.log(groceryIndex); 
    console.log(this.state.groceries[groceryIndex]); 
    } 

Answer 1

を試してみましたあなたは以前に設定された状態の値を編集しているので、あなたがsetState

this.setState((prevState, props) => { 
    const newGroceries = prevState.groceries.slice() 
    newGroceries[groceryIndex].completed = true 

    return { ...prevState, groceries: newGroceries } 
}) 

のこの定義を使用する必要があります。これは、groceries状態配列の値をとりますsetStateが呼び出され、変更対象の新しい変数に割り当てられ、指定されたインデックスにアクセスし、completedプロパティをtrueに設定します。その後、以前の状態値からのすべてを含む新しいオブジェクト/状態を返しますが、変更された新しいバージョンである変更されたgroceriesプロパティが返されます。