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

Question

我正在研究 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 中重新添加该值。请给我一些建议

Answer 1

一般来说，您可以使用以下代码更改每个组的值：

// 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! */ 
      })),
    })),
}))

这显然是非常嵌套的，可读性不是很好，但它是不可变的。下次我会推荐使用 immutable.js 之类的库或其他东西！

Answer 2

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

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

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

how to update nested array values in immutable way in reactjs

javascript

immutability

ecmascript-6

reactjs