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

Question

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

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

假设我需要将字段名称为 cityId 的状态对象更新为 true 的有效值。

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

我可以使用任何库 immutability-helper, immutable-js 等或 ES6。我已经尝试并在谷歌上搜索了 4 个多小时，但仍然无法理解它。非常感谢您的帮助。

Answer 1

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

@FellowStranger：我的 redux 状态有一个（而且只有一个）部分是对象数组。我使用减速器中的索引来更新正确的条目：

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 2

您可以使用 map 来迭代数据并检查 fieldName，如果 fieldName 是 cityId 那么您需要更改值并且 return 一个新对象 否则只是 return 相同 object.

这样写：

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

var newData = data.map(el => {
                  if(el.fieldName == 'cityId')
                     return Object.assign({}, el, {valid:true})
                  return el
              });

this.setState({ data: newData });

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 });

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

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

Update one of the objects in array, in an immutable way

javascript

immutability

ecmascript-6

reactjs

这是一个示例 - ES6