別のオブジェクトプロパティ値のオブジェクトプロパティ値の更新が失敗しました

Question

es6マップを使用してオブジェクトの配列のプロパティ値を更新しようとしました。私の論理に何が問題なの？これは、結果を新しい配列を作成します -

this.state = { 
     "fruits":[ 
     {"name":"banana","value":true}, 
     {"name":"watermelon","value":false}, 
     {"name":"lemon","value":false} 
     ] 
    } 

const key = 'lemon'; 
const newFruitsData = this.state.fruits.map(obj => 
     obj.name === key ? obj.value = true : ''  
    ) 

console.log(newFruitsData) 

は、私はあなたがArray.prototype.map[Array.prototype.map]

// demonstrates how to use ES6 MAP - The Map object is a simple key/value object. 

    var fruits= new Map(); 
    fruits.set('banana', true); 
    fruits.set('apple', false); 
    for (var [key, value] of fruits) { 
    console.log(key + ' = ' + value); 
    } 

でES6 map を混合しているhttp://jsbin.com/jagononuwe/1/edit?js,console,output

Answer 1

がArray.prototype.map方法と異なる反応作ることができませんこの配列内のすべての要素に対して提供された関数を呼び出す。上記のリンクをクリックしてください。

// to achieve what you are trying to do use `forEach` 

    this.state = { 
    "fruits":[ 
    {"name":"banana","value":true}, 
    {"name":"watermelon","value":false}, 
    {"name":"lemon","value":false} 
    ] 
} 

    const key = 'lemon'; 

    const newFruitsData = this.state.fruits.find(obj => { 
     if (obj.name === key) { 
       obj.value = false; 
     } 
    }); 

    const printNewData =() =>{ 
     this.state.fruits.forEach(obj => { 
      console.log(`${obj.name} ${obj.value}`); 
     }); 
    }; 

printNewData(); 

Answer 2

このタイプの操作には.findを使用する必要があります。マップは新しい配列を生成します。このようにして、状態値を更新するたびに新しい状態を再割り当てする必要があります。 Findは、あなた（または他のメソッド）が更新したい値を指定することさえ許可します。残りのコードによっては、これがより効率的かもしれません。

this.state = { 
    "fruits":[ 
    {"name":"banana","value":true}, 
    {"name":"watermelon","value":false}, 
    {"name":"lemon","value":false} 
    ] 
} 

const key = 'lemon'; 
const newFruitsData = this.state.fruits.find(obj => { 
    if (obj.name === key) obj.value = !obj.value 
}); 

console.log(this.state)