ReactJs : Mon tableau parent est mis à jour après avoir utilisé la fonction map
P粉208286791
P粉208286791 2024-04-03 20:04:17
0
1
543

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

P粉208286791
P粉208286791

répondre à tous(1)
P粉141455512

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();
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal