Question

尝试使用es6 map更新对象数组的属性值。我的逻辑出了什么问题？

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进行此类操作。 Map将为您生成一个新阵列。以这种方式编写，每次更新状态值时都必须重新分配新状态。查找将允许您（或其他方法）甚至允许您指定要更新的值。根据代码的其余部分，这可能更有效。

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)

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

2 个答案: