reactjs 在react js中比较并获取补丁api请求的两个对象的差异?

qv7cva1a  于 2022-11-29  发布在  React
关注(0)|答案(2)|浏览(118)

我有两个对象,前一个和新的一个,我试图比较并获得这些对象的差异,作为补丁有效载荷从补丁API发送到,
比较对象中的每个属性,如果任何属性有任何差异,我希望新对象中的所有这些差异作为有效负载
我怎样才能做到这一点,请帮我找到解决方案?是否有任何lodash的方法,为这个解决方案?

let obj = {
  Name: "Ajmal",
  age: 25,
  email: "ajmaln@gmail.com",
  contact: [12345678, 987654321],
  address: {
    houseName: "ABC",
    street: "XYZ",
    pin: 67891
  }
}

let obj2 = {
  Name: "Ajmal",
  age: 25,
  email: "something@gmail.com",
  contact: [12345678, 11111111],
  address: {
    houseName: "ABC",
    street: "XYZ",
    pin: 111
  }
}

预期结果有效负载如下所示

let payload = {
  email: "something@gmail.com",
  contact: [12345678, 11111111],
  address: {
    pin: 111
  }
}
nkcskrwz

nkcskrwz1#

Mista NewbeedRecursion为您服务:

const compare = (obj1, obj2) => {
  const keys = Object.keys(obj1);

  const payload = {};

  keys.forEach((el) => {
    const first = obj1[el];
    const second = obj2[el];
    let check;
    if (first !== second) {
      if (first instanceof Object && !(first instanceof Array))
        check = compare(first, second);
      payload[el] = check || second;
    }
  });
  return payload;
};
jhdbpxl9

jhdbpxl92#

这里有一个immer的方法,它可以指导您找到一个合适的解决方案。这不是一个通用的方法,但通过依赖immer可以使事情变得更容易。

import produce, { applyPatches, enablePatches } from "immer";
import { difference } from "lodash";

// once in your app
enablePatches();

let obj = {
  Name: "Ajmal",
  age: 25,
  email: "ajmaln@gmail.com",
  contact: [12345678, 987654321],
  address: {
    houseName: "ABC",
    street: "XYZ",
    pin: 67891
  }
};

let obj2 = {
  Name: "Ajmal",
  age: 25,
  email: "something@gmail.com",
  contact: [12345678, 11111111],
  address: {
    houseName: "ABC",
    street: "XYZ",
    pin: 111
  }
};

获取补丁程序更新

let fork = { ...obj };
    let changes = [];

    const updatedItem = produce(
      fork,
      (draft) => {

        // object specific updates
        draft.Name = obj2.Name;
        draft.age = obj2.age;
        draft.email = obj2.email;
        draft.address.houseName = obj2.address.houseName;
        draft.address.street = obj2.address.street;
        draft.address.pin = obj2.address.pin;
       const originalContact = original(draft.contact);
       const contactDiff = difference(obj2.contact, originalContact);
       console.log("diff", contactDiff);
       if (contactDiff?.length) {
         draft.contact = contactDiff;
       }

      },
      (patches) => {
        changes.push(...patches);
      }
    );

    //Problem here => default values need to be given to state
    // so the default values need to be excluded from the patch
    let state = { contact: [], address: {} };

    const patch = applyPatches(state, changes);

    console.log("patch", patch);

日志更改操作

contact: Array(1)
0: 11111111
address: Object
pin: 111
email: "something@gmail.com"

希望这对你有所帮助
干杯

相关问题