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

Question

我正在尝试在数组中插入新的键，这些键基本上是从父数组中提取的。我找不到仅仅通过将新密钥插入到提取的数组中就会导致商店内的主数组发生变化的原因。这是我尝试在自定义数组中添加新键值对的方法constarray=[{"integrationTypeId":1,"type":"aptus","fields":[{"n

P粉141455512 · Answer

重要的是要知道 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();

热门工具标签

Hot Questions

Hot Tools

vc9-vc14（32+64位）运行库合集（链接在下方）

VC9 32位

php程序员工具箱完整版

VC11 32位

SublimeText3汉化版

热门话题

热门文章