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

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,那么您需要更改值并返回一个新对象,否则只是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 2

这是一个示例示例 - 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 });

希望这会有所帮助，快乐编码！