我需要比較兩個 arrays 並讓 output 成為一個數組，在里面比較對象

Question

我有以下代碼，這是我之前的問題的答案，但我不想弄亂那個問題，而是想重申我真正在尋找什么，因為我似乎無法掌握它。

我想要的預期 output 現在只是一個 object，其值和 id 都已更改。 但是，這需要更改，因此它不會像現在代碼那樣在每次實例更改時疊加，還有另一個 object 得到控制。 我只想讓最新的比較得到安慰，而忽略前一個。 希望這是有道理的。 如果需要，我可以進一步解釋。

當我說堆疊時，我的意思是，下次更改 state 時，它會控制兩個項目，然后是三個，等等第四個。 我只想要最新的更改，以便我可以運行突變並更新我的數據庫

state 更改后的期望結果#1

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

state 更改后的期望結果#2

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

這是我實現它的方式，saveData state 依賴於到達 useState，所以它總是在變化。

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

更新：每次比較后，它都會向 object 添加屬性，我希望每次我的 onblur 事件觸發時只有最近更改的屬性，這意味着用戶已經離開輸入並且我觸發了我的保存突變。

這是顯示 object 中的多個屬性的屏幕截圖，它應該只有一個，然后是 ID。 它應該一起替換 object，而不是每次比較都添加到它。 數組中還有兩個對象，我只需要最近更改的一個，因為我在每次比較時都會觸發保存突變，並且只需要一個 object 有兩個字段，更改字段和 id。

Answer 1

我認為您需要將對象合並為只有一個對象，如下所示：

 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

這個 function 將遍歷兩種狀態並比較每個值。 如果新值不同，它將添加到 object。 如果 object 有屬性，那么它將添加col10屬性並將其添加到更改對象列表中。

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