更新基於另一個對象屬性值的對象屬性值失敗

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) 

無法彌補我的反應http://jsbin.com/jagononuwe/1/edit?js,console,output

Answer 1

你混合ES6 map 與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); 
    } 

從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進行這種操作。地圖會爲你製作一個新的陣列。用這種方式寫，每次更新狀態值時都必須重新分配一個新狀態。查找會允許你（或其他方法）甚至允許你指定你想要更新的值。取決於其他代碼，這可能更有效。

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)