如何在破坏和循环中更新值答案

【问题标题】：How to update a value in destructing and loop如何在破坏和循环中更新值
【发布时间】：2021-07-29 00:09:04
【问题描述】：

我想达到的目标：

我想更新一个 obj 中的值，它是数组元素的一部分。看下面的代码会给你更好的主意。

有一个问题是我通过引用而不是制作副本来更新对象的值。这会导致状态异常。

我尝试将其更改为制作副本，但我不确定。

例如

const returnObj = {
  ...objs,
  fields: [{name, value}, {name, value}, {name, value_update_this_only}, ...],
};

// This is the current code
export function* onChange(action) {
  // get partial state from redux state
  const list = yield select((state) => state.list);
  let objs = list[action.index];

  // * e.g. objs.fields === [{name, value}, {name, value}, ...]
  // * basically following, find the correct field and update its value
  // * following has problem, beause we change the value of a reference,
  // * instead we should make a new copy, so redux can react
  objs.fields.map((field) => {
    if (field.name === action.fieldName) {
      field["value"] = action.fieldValue;
    }
    return field;
  });

  // fire to redux reducer
  yield put({
    type: "UPDATE",
    prop: obj,
    docIndex: action.index,
  });
}

// the problem: I don't know how to do it in destructing manner.
const returnObj = {
  ...objs,
  fields: [],
};

【问题讨论】：

标签： javascript reactjs redux redux-saga self-destruction

【解决方案1】：

我认为与其尝试提出一个使这项工作有效的解构语句，不如以更小的步骤更容易消化（并且可以说更具可读性）：

制作objs的浅拷贝；现在叫它copy
重新创建 fields 数组和其中的每个项目
对于所需的数组项，更新其value
将copy.fields设置为2中创建的数组

// Step 1: Shallow copy
let copy = { ...objs }

// Step 2: Recreate fields and every item
let fields = copy.fields.map((field) => ({
  ...field
}))

// Step 3: Update value of desired item
fields.forEach((field) => {
  if (field.name === action.fieldName)
    field.value = action.fieldValue
})

// Step 4: Reassign fields to the copy
copy.fields = fields

对此进行重构，步骤 2-4 可以合并为一个步骤，而不会牺牲太多的可读性：

let copy = { ...objs }

copy.fields = copy.fields.map((field) => ({
  ...field,
  value: field.name === action.fieldName ? action.fieldValue : field.value,
}))

我已经很久没有使用 redux 或 sagas 了，所以我不确定 fields 是否需要是一个全新的数组，或者是否只是 fields 中更改的对象需要是新的，但是以上内容可以根据需要进行修改。

【讨论】：