ReactJs : Mon tableau parent est mis à jour après avoir utilisé la fonction map

Question

J'essaie d'insérer de nouvelles clés dans un tableau qui sont essentiellement extraites du tableau parent. Je ne trouve pas de raison pour laquelle le tableau principal du magasin changerait simplement en insérant une nouvelle clé dans le tableau extrait.

C'est ainsi que j'essaie d'ajouter de nouvelles paires clé-valeur dans un tableau personnalisé

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

Voici le résultat :

Console 1. : newArray

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

Console 2. : Tableau parent

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

Qu'est-ce qui le fait modifier avec la valeur newArray.

Même essayé : newArray.map(obj => ({ ...obj, [inputType]: "textField"}));

Answer 1

Il est important de savoir que les tableaux et objets Javascript sont passés par référence. Cela signifie que si vous modifiez un tableau ou un objet, cela sera reflété dans toutes les références à ce tableau ou à cet objet.

Dans ce cas, Array-->Object-->Array-->Object est trop imbriqué. Assurez-vous donc de créer un nouveau tableau ou objet lors de l'extraction. Ici, j'utilise ES6 ... 语法来创建一个新的数组/对象。只需使用 = pour copier la référence et refléter les modifications.

Le code ci-dessous n'est pas encore optimisé, mais j'espère que vous comprenez l'idée.

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