ReactJs: Tatasusunan induk saya dikemas kini selepas menggunakan fungsi peta

Question

Saya cuba memasukkan kunci baharu ke dalam tatasusunan yang pada asasnya diekstrak daripada tatasusunan induk. Saya tidak dapat mencari sebab mengapa tatasusunan utama dalam kedai akan berubah hanya dengan memasukkan kunci baharu ke dalam tatasusunan yang diekstrak.

Ini adalah cara saya cuba menambah pasangan nilai kunci baharu dalam tatasusunan tersuai

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

Berikut ialah output:

Konsol 1.: newArray

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

Konsol 2.: Susunan Ibu Bapa

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

Apa yang menjadikannya diubah suai dengan nilai newArray.

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

Answer 1

Adalah penting untuk mengetahui bahawa tatasusunan dan objek Javascript dihantar melalui rujukan. Ini bermakna jika anda mengubah suai tatasusunan atau objek, ia akan ditunjukkan dalam semua rujukan kepada tatasusunan atau objek itu.

Dalam kes ini, Array-->Object-->Array-->Object terlalu bersarang. Jadi pastikan anda membuat tatasusunan atau objek baharu semasa mengekstrak. Di sini saya menggunakan ES6 ... 语法来创建一个新的数组/对象。只需使用 = untuk menyalin rujukan dan mencerminkan perubahan.

Kod di bawah belum dioptimumkan lagi, tetapi saya harap anda mendapat idea itu.

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