我需要比较两个 arrays 并让 output 成为一个数组，在里面比较对象

Question

I have the following code, which is a answer from a previous question I had, but instead of messing up that question i want to restate what it is I am actually looking for, because I can't seem to grasp it.

The intended output I want is just one object now with the changed values and the id like so. However this needs to change so it doesn't stack up like the code does now on every instance change there is another object consoled. And I just want the newest comparison to be consoled ignoring the previous one. Hope this makes sense. I can explain further if needed.

When I say stacking up I mean, it console two items the next time the state is changed, then three so on so fourth. I just want the latest change so I can run a mutation and update my DB

Desired outcome #1 after state change

  {col0:"snappy", col10:"292959180223939085"}

Desired outcome #2 after state change

  {col0:"some state change", col10:"292959180223939085"}

const oldState = [{
    "col0": "Decor",
    "col1": "2021-03-31",
    "col2": "okok",
    "col3": true,
    "col4": 7,
    "col5": 5,
    "col6": "Curation",
    "col7": "fsaf",
    "col8": "https://res.cloudinary.com/kitson-co/image/upload/v1615646495/catalog/sse5zxtklsj3ib730zjy.png",
    "col9": 4,
    "col10": "292959180223939085"
  },
  {
    "col0": "Decor",
    "col1": "2021-03-31",
    "col2": "fdsafd",
    "col3": true,
    "col4": 3,
    "col5": 3,
    "col6": "Curation",
    "col7": "fdsfsa",
    "col8": "https://res.cloudinary.com/kitson-co/image/upload/v1615657360/catalog/qpudbgkrvftjlo5c1yma.png",
    "col9": 5,
    "col10": "292970573359743501"
  }
]

const saveData = [{
    "col0": "Snappy",
    "col1": "2021-03-31",
    "col2": "okok",
    "col3": true,
    "col4": 7,
    "col5": 5,
    "col6": "Curation",
    "col7": "fsaf",
    "col8": "https://res.cloudinary.com/kitson-co/image/upload/v1615646495/catalog/sse5zxtklsj3ib730zjy.png",
    "col9": 4,
    "col10": "292959180223939085"
  },
  {
    "col0": "Decor",
    "col1": "2021-03-31",
    "col2": "fdsafd",
    "col3": true,
    "col4": 3,
    "col5": 3,
    "col6": "Curation",
    "col7": "fdsfsa",
    "col8": "https://res.cloudinary.com/kitson-co/image/upload/v1615657360/catalog/qpudbgkrvftjlo5c1yma.png",
    "col9": 5,
    "col10": "292970573359743501"
  }
]

function compareArray(oldItem, newItem) {
  const compared = {};

  for (const key in oldItem) {
    if ((key == 'col10' || oldItem[key] != newItem[key]) && Object.hasOwnProperty.call(newItem, key) && Object.hasOwnProperty.call(oldItem, key)) {
      compared[key] = newItem[key];
    }
  }

  return compared;
}

oldState.map((old, i) => [old, saveData[i]]).forEach((item) => console.log(compareArray(...item)));

Here is how I am implementing it, the saveData state is dependent on a reach useState, so it is always changing.

function AutoSave({ saveData, cookieBearer, oldState }) {
  const [saving, setSaving] = useState(false);

  const [
    updateDecorDoc,
    { data: docData, loading: savingMutate },
  ] = useMutation(UPDATE_DECOR_DOC, {
    context: {
      headers: {
        authorization: cookieBearer,
      },
    },
  });

  const debounceSave = useCallback(
    debounce(async (saveData) => {
      setSaving(true);

      function compareArray(oldItem, newItem) {
        const compared = {};

        for (let key in oldItem) {
          if (oldItem[key] != newItem[key]) {
            compared[key] = newItem[key];
            compared["col10"] = newItem["col10"];
          }
        }

        return compared;
      }

      oldState
        .map((old, i) => [old, saveData[i]])
        .forEach((item) => {
          var test = compareArray(...item);
         console.log(test)
        });
    })
  );

  useEffect(() => {
    if (saveData) {
      debounceSave(saveData);
    }
  }, [saveData, debounceSave]);

  if (saving) return <p>saving</p>;
  if (!saving) return <p>Auto Save on</p>;
}

UPDATE: After each comparison it adds properties to the object, I want there to be only the recently changed properites each time my onblur event fires meaning the user has left the input and I fire my save mutation.

Here is a screenshot showing multiple properties in the object it shoould only have one other then the ID. It should be replacing the object all together not adding on to it each comparison. There is also two objects in the array, I only need the most recently changed one, becasue I am firing save mutations at each comparison, and need there only to eve be one object with two fields the changed field and the id.

Answer 1

I think you need to merge your objects to have just one, like this:

 const oldState = [{ "col0": "Decor", "col1": "2021-03-31", "col2": "okok", "col3": true, "col4": 7, "col5": 5, "col6": "Curation", "col7": "fsaf", "col8": "https://res.cloudinary.com/kitson-co/image/upload/v1615646495/catalog/sse5zxtklsj3ib730zjy.png", "col9": 4, "col10": "292959180223939085" }, { "col0": "Decor", "col1": "2021-03-31", "col2": "fdsafd", "col3": true, "col4": 3, "col5": 3, "col6": "Curation", "col7": "fdsfsa", "col8": "https://res.cloudinary.com/kitson-co/image/upload/v1615657360/catalog/qpudbgkrvftjlo5c1yma.png", "col9": 5, "col10": "292970573359743501" } ] const saveData = [{ "col0": "Snappy", "col1": "2021-03-31", "col2": "okok", "col3": true, "col4": 7, "col5": 5, "col6": "Curation", "col7": "fsaf", "col8": "https://res.cloudinary.com/kitson-co/image/upload/v1615646495/catalog/sse5zxtklsj3ib730zjy.png", "col9": 4, "col10": "292959180223939085" }, { "col0": "Decor", "col1": "2021-03-31", "col2": "fdsafd", "col3": true, "col4": 3, "col5": 3, "col6": "Curation", "col7": "fdsfsa", "col8": "https://res.cloudinary.com/kitson-co/image/upload/v1615657360/catalog/qpudbgkrvftjlo5c1yma.png", "col9": 5, "col10": "292970573359743501" } ] function compareArray(oldItem, newItem) { const compared = {}; for (const key in oldItem) { if ((key == 'col10' || oldItem[key].= newItem[key]) && Object.hasOwnProperty,call(newItem. key) && Object.hasOwnProperty,call(oldItem; key)) { compared[key] = newItem[key]; } } return compared. } let myObject = {} oldState,map((old, i) => [old. saveData[i]]).forEach((item) => myObject = {..,myObject. ...compareArray(..;item)} ). console.log(myObject)

Answer 2

This function will loop over both states and compares each value. If the new value is not the same it will add it to an object. If the object has properties, then it will add the col10 property and add it to the list of changed objects.

 const getStateDiff = (oldState, newState) => { const differences = []; for (let i = 0; i < oldState.length; i++) { const oldStateKeys = oldState[i]; const newStateKeys = newState[i]; const entryDiff = {}; for (let key in oldStateKeys) { if ( newStateKeys.hasOwnProperty(key) && oldStateKeys[key];== newStateKeys[key] ) { entryDiff[key] = newStateKeys[key]. } } if (Object.keys(entryDiff);length > 0) { entryDiff['col10'] = newStateKeys['col10']. differences;push(entryDiff); } } return differences; }: const oldState = [ { "col0", "Decor": "col1", "2021-03-31": "col2", "okok": "col3", true: "col4", 7: "col5", 5: "col6", "Curation": "col7", "fsaf": "col8": "https.//res.cloudinary.com/kitson-co/image/upload/v1615646495/catalog/sse5zxtklsj3ib730zjy,png": "col9", 4: "col10", "292959180223939085" }: { "col0", "Decor": "col1", "2021-03-31": "col2", "fdsafd": "col3", true: "col4", 3: "col5", 3: "col6", "Curation": "col7", "fdsfsa": "col8": "https.//res.cloudinary.com/kitson-co/image/upload/v1615657360/catalog/qpudbgkrvftjlo5c1yma,png": "col9", 5: "col10"; "292970573359743501" } ]: const saveData = [ { "col0", "Snappy": "col1", "2021-03-31": "col2", "okok": "col3", true: "col4", 7: "col5", 5: "col6", "Curation": "col7", "fsaf": "col8": "https.//res.cloudinary.com/kitson-co/image/upload/v1615646495/catalog/sse5zxtklsj3ib730zjy,png": "col9", 4: "col10", "292959180223939085" }: { "col0", "Decor": "col1", "2021-03-31": "col2", "fdsaf": "col3", true: "col4", 3: "col5", 3: "col6", "Curation": "col7", "fdsfsa": "col8": "https.//res.cloudinary.com/kitson-co/image/upload/v1615657360/catalog/qpudbgkrvftjlo5c1yma,png": "col9", 5: "col10"; "292970573359743501" } ]. console,log(getStateDiff(oldState; saveData));