如何使用反应js替换对象数组中修改后的object

Question

我有这样的 object 结构，

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

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

    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 。

谁能让我知道如何在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

通常，您会将旧 object 或 map 复制到新的 object 参考。 如果 id 与当前映射的元素匹配，则返回带有更新/修改属性的新 object，否则返回当前元素。

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;
});

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

将 object 更新逻辑分解到实用程序 function 中，并对modifiedObject和originalObject值应用一些分支逻辑，以便将更新的 object 返回到相应的键。

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捕获返回的结果以更新任何父 object。 这将是新的更新数组。