ReactJs: My parent array gets updated after using map function
P粉208286791
P粉208286791 2024-04-03 20:04:17
0
1
448

I'm trying to insert new keys into an array that are basically extracted from the parent array. I can't find a reason why the main array within the store would change just by inserting a new key into the extracted array.

This is how I try to add a new key value pair in a custom array

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

The following is the output:

Console 1.: newArray

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

Console 2.: Parent array

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

What makes it modified with newArray value.

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

P粉208286791
P粉208286791

reply all(1)
P粉141455512

It is important to know that Javascript arrays and objects are passed by reference. This means that if you modify an array or object, it will be reflected in all references to that array or object.

In this case, Array-->Object-->Array-->Object is too nested. So make sure to create a new array or object when extracting. Here I use ES6 ... syntax to create a new array/object. Simply use = to copy its reference, thus reflecting the changes.

The code below is not optimized yet, but I hope you get the idea.

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();
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!