编辑以将更新的对象返回到其原始对象键

Question

如何使用 React js 替换对象数组中已修改的对象

2021-01-18

124

javascript arrays reactjs object ecmascript-6

我有像这样的对象结构，

[{
"id":"8661c8c96df94ac78283360e0d1c86bd",
"modifiedObject":{....},
"originalObject":{...}
},
{
"id":"1525drd616dr17d78283360e0d1c86bd",
"modifiedObject":null,
"originalObject":{...}
},
{
"id":"6767srsr14542525276767cbd246464",
"modifiedObject":{....},
"originalObject":null
}]

我正在查找一个具有 id 的对象并获取内部对象（如果存在修改后的对象，如果不是原始对象），然后使用以下代码修改数据

    const originalCopyObject = projObjs.find(s => s.id === projectObjectId);
    const targetCopyObject = originalCopyObject.modifiedObject || originalCopyObject.originalObject; // here in this case it always be one either modified or original object
    const targetMutatedCopyObject = cloneDeep(targetCopyObject);
    if (!targetMutatedCopyObject?.glazingOrGasMaterials.length) {
      targetMutatedCopyObject.glazingOrGasMaterials = [
        ...targetMutatedCopyObject.glazingGasMaterials,
        ...targetMutatedCopyObject.glazingSimpleMaterials,
      ];          
    }
    targetMutatedCopyObject.opaqueConstructions.forEach(transformConstructions);

现在 targetMutatedCopyObject 具有 modifiedObject 或 originalObject 之一，我怎样才能在 projObjs 中替换这个 targetMutatedCopyObject 对象。

有人可以告诉我如何在 projObjs 对象数组中替换这个 tragetMutatedCopyObject 。

提前谢谢您。

更新的代码：

   projObjs.map(projObj => {
    if (projObj.id === projectObjectId) {
      const targetCopyObject = projObj.modifiedObject || projObj.originalObject;
      const mutatedCopyObject = transformFormStateToMutationObject(targetCopyObject);
      if (projObj.modifiedObject) {
        return {
          ...projObj,
          modifiedObject: mutatedCopyObject
        };
      }
      if (projObj.originalObject) {
        return {
          ...projObj,
          originalObject: mutatedCopyObject
        };
      }
      return projObj;
    }
    return projObj;
  });
}`

Answer 1

通常，您会将旧对象复制或映射到新对象引用。如果 ID 与当前映射的元素匹配，则返回具有更新/修改属性的新对象，否则返回当前元素。

projObjs.map((projObj) => {
  if (projObj.id === projectObjectId) {
    const targetCopyObject = projObj.modifiedObject || projObj.originalObject;

    const targetMutatedCopyObject = cloneDeep(targetCopyObject);

    if (!targetMutatedCopyObject?.glazingOrGasMaterials.length) {
      targetMutatedCopyObject.glazingOrGasMaterials = [
        ...targetMutatedCopyObject.glazingGasMaterials,
        ...targetMutatedCopyObject.glazingSimpleMaterials
      ];
    }

    targetMutatedCopyObject.opaqueConstructions.forEach(transformConstructions);

    return {
      ...projObj,
      modifiedObject: targetCopyObject
    };
  }

  return projObj;
});

编辑以将更新的对象返回到其原始对象键

将对象更新逻辑分解为实用函数，并对 modifiedObject 和 originalObject 值应用一些分支逻辑，以便将更新的对象返回到适当的键。

projObjs.map((projObj) => {
  if (projObj.id === projectObjectId) {
    const updateObject = (targetCopyObject) => {
      const targetMutatedCopyObject = cloneDeep(targetCopyObject);
      if (!targetMutatedCopyObject?.glazingOrGasMaterials.length) {
        targetMutatedCopyObject.glazingOrGasMaterials = [
          ...targetMutatedCopyObject.glazingGasMaterials,
          ...targetMutatedCopyObject.glazingSimpleMaterials
        ];
      }

      targetMutatedCopyObject.opaqueConstructions.forEach(
        transformConstructions
      );

      return targetMutatedCopyObject;
    };

    if (projObj.modifiedObject) {
      return {
        ...projObj,
        modifiedObject: updateObject(projObj.modifiedObject)
      };
    }

    if (projObj.originalObject) {
      return {
        ...projObj,
        originalObject: updateObject(projObj.originalObject)
      };
    }

    return projObj;
  }

  return projObj;
});

注意：请务必捕获 projObjs.map 返回的结果以更新任何父对象。这将是新的更新数组。