ReactJs: Mein übergeordnetes Array wird nach Verwendung der Kartenfunktion aktualisiert

Question

Ich versuche, neue Schlüssel in ein Array einzufügen, die im Wesentlichen aus dem übergeordneten Array extrahiert werden. Ich kann keinen Grund finden, warum sich das Hauptarray im Speicher ändern würde, indem einfach ein neuer Schlüssel in das extrahierte Array eingefügt wird.

So versuche ich, neue Schlüssel-Wert-Paare in einem benutzerdefinierten Array hinzuzufügen

const array = [{"integrationTypeId":1,"type":"aptus","fields":[{"name":"base_url"},{"name":"hash_key"}]}]

function runArray(){
let connectorObject= {}
let newArray
if (array.length > 0) {
                connectorObject =
                    array.find(
                        (c) => c.integrationTypeId === 1,
                    );
                newArray = connectorObject.fields
                newArray !== undefined &&
                    newArray.map((object) => {
                        return Object.assign(object, {
                            inputType: "textField",
                            value: object.name,
                        })
                    })
            }
            console.log(JSON.stringify(newArray))
            console.log(JSON.stringify(array))
}

runArray();

Das Folgende ist die Ausgabe:

Konsole 1.: newArray

[{"name":"base_url","inputType":"textField","value":"base_url"},{"name":"hash_key","inputType":"textField","value":"hash_key"}]

Konsole 2.: Übergeordnetes Array

[{"integrationTypeId":1,"type":"aptus","fields":[{"name":"base_url","inputType":"textField","value":"base_url"},{"name":"hash_key","inputType":"textField","value":"hash_key"}]}]

Was macht es mit dem Wert newArray geändert?

Sogar versucht: newArray.map(obj => ({ ...obj, [inputType]: "textField"}));

Answer 1

重要的是要知道 Javascript 数组和对象是通过引用传递的。这意味着如果您修改数组或对象，它将反映在对该数组或对象的所有引用中。

在这种情况下，数组-->对象-->数组-->对象嵌套过多。因此，在提取时请确保创建一个新的数组或对象。这里我使用 ES6 ... 语法来创建一个新的数组/对象。只需使用 = 即可复制其引用，从而反映更改。

下面的代码尚未优化，但我希望您明白这一点。

const array = [
  {
    integrationTypeId: 1,
    type: "aptus",
    fields: [{ name: "base_url" }, { name: "hash_key" }],
  },
];

function runArray() {
  let connectorObject = {};
  let newArray = [];

  if (array.length > 0) {
    connectorObject = {
      ...array.find((c) => c.integrationTypeId === 1), //Creating brand new copy of array object
      fields: [...array.find((c) => c.integrationTypeId === 1).fields], //Creating brand new copy of fields array
    };

    newArray = connectorObject.fields.map((field) => {  //Creating brand new copy of fields array object
      return { ...field };
    });

    newArray.map((object) => {
      Object.assign(object, {
        inputType: "textField",
        value: object.name,
      });
    });
  }
  console.log(JSON.stringify(newArray));
  console.log(JSON.stringify(array));
}

runArray();