代码之家 › 专栏 › 技术社区 › morne

创建属性的不可变副本

immutability reactjs javascript

-1

morne · 技术社区 · 8 年前

我有一种情况,我想做一个不可更改的属性副本,以恢复其原始状态…好的状态。

我有一系列 group 物体。
在每个 组 我有很多 items 是的。
当我复印时,一切都很好。

我从做这个开始。

componentDidMount(){
    // originalGroups = Object.assign([], this.props.modalitygroups);
    originalGroups = JSON.parse(JSON.stringify(this.props.modalitygroups));
},

我试过上面的两个语句,但是读到当前的活动语句生成了一个对象的真正深层副本。针头说它确实复制得很好。

然后我有这个搜索功能来搜索组和项目中的项目。

_searchFilter:function(search_term){
    this.setState({modalitygroups:originalGroups});
    let tempGroups = Object.assign([], this.state.modalitygroups);

    if(search_term !== ''){
        for (let x = (tempGroups.length) - 1; x >= 0; x--)
        {
            console.log("originalGroups",x,originalGroups);

            for (let i = (tempGroups[x].items.length) - 1; i >= 0; i--)
            {
                if(!tempGroups[x].items[i].description.toLowerCase().includes(search_term.toLowerCase())){
                    tempGroups[x].items.splice(i,1);
                }
            }
            if(tempGroups[x].items.length === 0){
                tempGroups.splice(x, 1);
            }
        }
        this.setState({modalitygroups:tempGroups});
    }
},

因此,我首先恢复原始状态,以便能够搜索所有内容。搜索功能循环遍历每个组,在每个组循环中,我循环遍历每个项目,删除不包含搜索短语的项目。
循环遍历每个项目后,如果组中没有任何项目,我将从 组 阵列也一样。

这是第一次成功。

但是当我开始寻找新的物品时,我发现 originalGroups 也改变了。上次删除的 项目 已从中删除 unchangable 我也不知道为什么。它在哪里以及为什么要更改我的安全副本?

希望这有意义。

2 回复 | 直到 8 年前

Jason Goemaat 8 年前

那么模态组包含原始组吗?这很难理解…我不会“保存”原始组,而是将this.props.modalitygroups单独保留并复制到 filteredGroups 国家的。你可以从你从未改变过的道具中重新加载它。

在你的过滤函数中 let tempGroups = Object.assign([], this.state.modalitygroups); 这可能是您使用json创建深层副本的地方。这将使用旧数组中的相同组引用填充新数组,因此您将修改原始数组中的相同组实例。

_searchFilter:function(search_term){
    // deep copy
    let tempGroups = JSON.parse(JSON.stringify(this.props.modalitygroups));

    if(search_term !== ''){
        for (let x = (tempGroups.length) - 1; x >= 0; x--)
        {
            console.log("originalGroups",x,originalGroups);

            for (let i = (tempGroups[x].items.length) - 1; i >= 0; i--)
            {
                if(!tempGroups[x].items[i].description.toLowerCase().includes(search_term.toLowerCase())){
                    tempGroups[x].items.splice(i,1);
                }
            }
            if(tempGroups[x].items.length === 0){
                tempGroups.splice(x, 1);
            }
        }
        this.setState({modalitygroups:tempGroups});
    }
},

Isaac 8 年前

const state = {
  property1: 42
};

const originalGroups = Object.freeze(state);

originalGroups.property1 = 33;
// Throws an error in strict mode

console.log(originalGroups.property1);
// expected output: 42

基本上 ReactJS 仍然 javascript 毕竟,你可以申请 Object.freeze 保存状态副本