Javascript 如何在reactjs中以不可变的方式更新嵌套数组值

我在做reactjs

[
    {
        key: 'a',
        map: [
            {
                brand: 'sam',
                year: 2015,
                models: [
                    {
                        pk: 1,
                        value: 15,
                    },
                    {
                        pk: 2,
                        value: 20,
                    },
                ],
            },
            {
                brand: 'sony',
                year: 2016,
                models: [
                    {
                        pk: 3,
                        value: 15,
                    },
                    {
                        pk: 4,
                        value: 20,
                    },
                ],
            },
        ],
    },
    {
        key: 'b',
        map: [
            {
                brand: 'nok',
                year: 2015,
                models: [
                    {
                        pk: 1,
                        value: 15,
                    },
                    {
                        pk: 2,
                        value: 20,
                    },
                ],
            },
            {
                brand: 'folo',
                year: 2016,
                models: [
                    {
                        pk: 3,
                        value: 15,
                    },
                    {
                        pk: 4,
                        value: 20,
                    },
                ],
            },
        ],
    },
]

现在我的任务是用户更新

value

属性的值，所以我必须更新整个数组。我正在努力以不变的方式做到这一点。已经编写了这样更新的代码

let groupB = [...this.state.groupB];

  const modifiedPrgram = groupB.filter(data => data.brand === obj.brand)
  .map(proData => proData.map.filter(filetredData => filetredData.year === this.props.year))
  let models=modifiedPrgram[0].map(data => data.models)

  var selectedData = models.filter(data => data.pk === obj.pk);

    var diff = obj.value - selectedData[0].value;

    var otherData = models.filter(data => data.pk !== obj.pk);

    var sum = otherData.map(data => data.value).reduce((a, b) => a + b, 0);

    for (var i = 0; i < models.length; i++) {
      if (models[i].pk !== obj.pk) {
        models[i].value =
          models[i].value -( models[i].value / sum )* diff;
      } else 
        models[i].value = obj.value;

    }

让groupB=[…this.state.groupB]；
const modifiedprogram=groupB.filter（数据=>data.brand===obj.brand）
.map（proData=>proData.map.filter（filetredData=>filetredData.year==this.props.year））
让models=modifiedgram[0].map（data=>data.models）
var selectedData=models.filter（data=>data.pk==obj.pk）；
var diff=obj.value-选择的数据[0]。值；
var otherData=models.filter（data=>data.pk！==obj.pk）；
var sum=otherData.map（data=>data.value）.reduce（（a，b）=>a+b，0）；
对于（变量i=0；i

---

但是现在我很困惑如何在我的groupB中重新添加这个值。请在此

中给我一些建议。通常，您可以使用以下代码更改每个组的值：

// afterwards you receive a new Group in the same format as before!
const newGroup = groups.map(group => ({
    ...group,
    map: group.map.map(branding => ({
        ...branding,
        models: branding.models.map(model => ({ 
         ...model, 
         value: 10 /* Change the value over here! */ 
      })),
    })),
}))

这显然是非常嵌套的，不太可读，但它是不可变的。

---

下一次，我会推荐使用类似的库或其他东西

这是不可变数组的另一个示例

case MOVE_DEVICE_SUCCESS:
  console.log(action.payload);
  let Groups = [...state];
  let idxGroup = Groups.findIndex(group => {
    return group.id === action.payload.GroupId;
  });

  let idxDevice = Groups[idxGroup].Devices.findIndex(device => {
    return device.id = action.payload.id;
  });

  let temp = {...Groups[idxGroup].Devices[idxDevice]};

  let newOne = [...Groups.map(group => {
    if (group.id === action.payload.GroupId){
      const filtered = group.Devices.filter(device => {
        if(device.id !== action.payload.id){
          return {...device}
        }
      });
      group.Devices = [...filtered];
      return {...group}
    } else if (group.id === action.payload.TargetGroupId){
      group.Devices = [...group.Devices, {...temp}];
      return {...group}
    } else {
      return {...group}
    }
  })]
  return [...newOne];

default:
  return state

---

对象文字无效（大括号不平衡，同一对象中存在重复的“key”属性）且与代码不匹配：代码假定“brand”和“map”是同一对象的属性，而在对象文字中，“brand”属于分配给“map”属性的数组中的对象。请让这个问题至少保持一致。很抱歉，我已经更新了它。请看一次，我们可以看一看；你的意思是说我为更新而编写的代码应该替换为你给出的代码？如果是的话，我如何在这里编写我的整个for循环我读起来很复杂不，这不是复制粘贴流。我只是想给大家一个关于如何以不变的方式处理我们的“数据”的一般概念。您还没有描述您“筛选/排序”的目的，因此我无法复制它。哦，好的..我将尝试更新该值。如果我遇到任何问题，我知道该联系谁..；）请随意这样做@vihangshah如果这有助于解决您的问题，请随意将其标记为有效的解决方案并进行投票。