更新基于另一个对象属性值的对象属性值失败

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)