ReactJs：使用映射函数后我的父数组得到更新

Question

我正在尝试在数组中插入新的键，这些键基本上是从父数组中提取的。我找不到仅仅通过将新密钥插入到提取的数组中就会导致商店内的主数组发生变化的原因。

这是我尝试在自定义数组中添加新键值对的方法

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

以下是输出：

控制台 1.：newArray

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

控制台 2.：父数组

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

是什么让它用 newArray 值进行修改。

甚至尝试过： 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();