代码之家 › 专栏 › 技术社区 › Sankalp Singha

合并两个具有内部数组属性的对象,而不改变react中的状态

react-redux react-native reactjs arrays javascript

Sankalp Singha · 技术社区 · 7 年前

我有一个这样的状态对象:

{
    news: {
        news: [
            {
                id: 1,
                name: 'test1'
            },
            {
                id: 2,
                name: 'test2'
            },
            {
                id: 3,
                name: 'test3'
            }
        ]
    }
    ]
}

现在,我发出一个Ajax请求,得到的响应如下:

[
    {
        id: 4,
        name: 'test4'   
    },
    {
        id: 5,
        name: 'test5'   
    },
    {
        id: 6,
        name: 'test6'   
    }
]

我不想改变状态,所以在我的Reducer中,如何合并这两个值,以便最终输出如下:

{
    news: {
        news: [
            {
                id: 1,
                name: 'test1'
            },
            {
                id: 2,
                name: 'test2'
            },
            {
                id: 3,
                name: 'test3'
            },
            {
                id: 4,
                name: 'test4'   
            },
            {
                id: 5,
                name: 'test5'   
            },
            {
                id: 6,
                name: 'test6'   
            }
        ]
    }
    ]
}

我尝试过类似的方法,但是,它替换了整个新闻对象。

return { ...state, news: action.payload }

哪里有效载荷在我的回答中有价值。我知道我可能遗漏了一些简单而明显的东西。

2 回复 | 直到 7 年前

adiga 7 年前

假设 action.payload 是 news ajax返回的数组:

return { ...state, news: { news: [...state.news.news, ...action.payload] } }

ehutchllew 7 年前

这是一个辅助函数,它将为您执行深度克隆,而不考虑其结构:

function deepClone(obj){
    return Object.keys(obj).reduce((objClone, key) => {
        let newValue;

        if(Array.isArray(obj[key]){
            newValue = obj[key].map(item => deepClone(item));
        }
        else if(obj[key] !== null && typeof obj[key] = 'object'){
            newValue = deepclone(obj[key]);
        }
        else{
            newvalue = obj[key];
        }

        return {...copyObj, [key]: newvalue};
    }, {});
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前