Arrays 影响反应状态的克隆阵列

我在react应用程序中克隆阵列时遇到问题

我将一个包含数据的数组导入名为ApplicationData的应用程序。这是一个对象数组

import ApplicationsData from '../Store/Applications';

应用程序组件具有以下状态：

constructor(props) {
    super(props);    
    this.state = { 
        isOn: true,
        untouchedApplications: [...ApplicationsData],
        applications: [...ApplicationsData],
        activeWindows: [...defaultActive],
        background: "#3a6ea5"
    };
}

我使用“…”扩展运算符克隆了包含数据的阵列

在我的上下文中，我有一个方法openApp，它更改state.applications中元素的属性

openApp: (appID) => {
                let appIndex = this.state.applications.findIndex( el => el.id == appID);
                let clone = [...ApplicationsData];
                
                clone[appIndex].isActive = true;
                clone[appIndex].newProp = true;
                clone[appIndex].isMinimized = false;
                this.setState({applications: clone})
            },

每当我到达克隆[appIndex].prop=value的

state时，应用程序和未触及的应用程序都会被该数据覆盖，尽管在state和openApp中都使用了扩展运算符。处于状态的UntouchDapplications数组不会在应用程序或方法中的任何位置使用，但也会得到更新。另外，分配给克隆数组的newProp属性在包含数据的原始数组中不存在，但在将其添加到克隆数组后，会应用于状态为的两个数组

我还尝试使用
Array.from
和
state.applications.slice（）
创建克隆。我在这里感到有点迷茫，因为我确信这是克隆阵列的正确方法

对不起，代码缩进太乱了。我不知道如何使它格式正确。第一行在其他行之前，或者所有行都以8个制表符开头。关于这方面的任何提示都值得欣赏。
您应该使用
map
功能

(appID) => {
   let clone = this.state.applications.map(item => {
        if (item.id == appId) {
            return {
                ...item,
                isActive: true,
                newProp: true,
                isMinimized: false
            }
        }
        return item;
    })    
    this.setState({applications: clone})
},

这是因为当您使用
…
操作符时，它会创建数组的浅拷贝，而不是深拷贝


let val=[{key:“value”}，{key:“value”}，{key:“value”}]
让copy=[…val]；
让isEqualShallow=val[0]==copy[0]
console.log（isEqualShallow）
您应该使用
map
函数

(appID) => {
   let clone = this.state.applications.map(item => {
        if (item.id == appId) {
            return {
                ...item,
                isActive: true,
                newProp: true,
                isMinimized: false
            }
        }
        return item;
    })    
    this.setState({applications: clone})
},

这是因为当您使用
…
操作符时，它会创建数组的浅拷贝，而不是深拷贝


let val=[{key:“value”}，{key:“value”}，{key:“value”}]
让copy=[…val]；
让isEqualShallow=val[0]==copy[0]
log（isEqualShallow）
您正在使用的数组是对象数组。对象是引用类型，这意味着您的数组包含对对象的引用

当您将数组扩展到一个新数组中时，您不是在克隆对象，而是在克隆对象的引用，因此当您编写
clone[appIndex]
时，您是在引用两个数组中包含的同一对象

要解决此问题，可以使用
map
方法克隆要更改的对象：

const newArray = ApplicationsData.map(
  (item, index) =>
    index == appIndex ?
      ({
         ...item,
         isActive: true,
         newProp: true,
         isMinimized: false
       }) : 
    item
);

这将返回所有项的原始对象引用，但要更改的特定项除外。在这种情况下，它会创建一个全新的对象并返回该引用，因此原始对象保持不变。
您使用的数组是对象数组。对象是引用类型，这意味着您的数组包含对对象的引用

当您将数组扩展到一个新数组中时，您不是在克隆对象，而是在克隆对象的引用，因此当您编写
clone[appIndex]
时，您是在引用两个数组中包含的同一对象

要解决此问题，可以使用
map
方法克隆要更改的对象：

const newArray = ApplicationsData.map(
  (item, index) =>
    index == appIndex ?
      ({
         ...item,
         isActive: true,
         newProp: true,
         isMinimized: false
       }) : 
    item
);

这将返回所有项的原始对象引用，但要更改的特定项除外。在这种情况下，它创建一个全新的对象并返回该引用，因此原始对象保持不变