这是一个示例示例-ES6

Question

在React的this.state中，我有一个名为formErrors的属性，其中包含以下动态对象数组。

[
  {fieldName: 'title', valid: false}, 
  {fieldName: 'description', valid: true},
  {fieldName: 'cityId', valid: false},
  {fieldName: 'hostDescription', valid: false},
]

假设我需要将具有fieldName cityId的州的对象更新为有效值true。

解决此问题的最简单或最常用的方法是什么？

我可以使用任何库immutability-helper，immutable-js等或ES6。我试过用Google搜索了4个多小时，仍然无法绕过它。非常感谢一些帮助。

Answer 1

您可以使用map来迭代数据并检查fieldName，如果fieldName是cityId，那么您需要更改值，返回一个新对象，否则只需{{1}相同的return。

像这样写：

object

Answer 2

immutability-helper怎么样？效果很好。您正在寻找我认为的$merge命令。

@FellowStranger：我的redux状态中有一个（也是唯一一个）部分是一个对象数组。我使用reducer中的索引来更新正确的条目：

case EMIT_DATA_TYPE_SELECT_CHANGE:
  return state.map( (sigmap, index) => {
    if ( index !== action.payload.index ) {
      return sigmap;
    } else {
      return update(sigmap, {$merge: {
        data_type: action.payload.value
      }})
    }
})

坦率地说，这有点油腻，我打算改变我的状态对象的那部分，但它确实有用......听起来你并没有使用redux，但战术应该是相似的。

Answer 3

我强烈建议您不要将值存储在数组中，而是可以轻松指定要更新的元素。在下面的示例中，键是fieldName，但它可以是任何唯一标识符：

var fields = {
    title: {
        valid: false
    },
    description: {
        valid: true
    }
}

然后你可以使用immutability-helper的update函数：

var newFields = update(fields, {title: {valid: {$set: true}}})

Answer 4

这是一个示例示例-ES6

左是代码，右是输出

这是下面的代码

const data = [
    { fieldName: 'title', valid: false }, 
    { fieldName: 'description', valid: true },
    { fieldName: 'cityId', valid: false }, // old data
    { fieldName: 'hostDescription', valid: false },
]

const newData = data.map(obj => {
  if(obj.fieldName === 'cityId') // check if fieldName equals to cityId
     return {
       ...obj,
       valid: true,
       description: 'You can also add more values here' // Example of data extra fields
     }
  return obj
});

const result = { data: newData }; 

console.log(result);

this.setState({ data: newData });

希望这会有所帮助，祝您编码愉快！

以不可变的方式更新数组中的一个对象

4 个答案:

这是一个示例示例-ES6