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

Question

我有一个这样的状态对象： {     新闻：{         新闻：             {                 编号：1                 名称：“ test1”             }，             {                 编号：2                 名称：“ test2”             }，             {                 id：3，                 名称：“ test3”             }         ]     }     ] } 现在，我正在发出一个Ajax请求，并得到如下响应： [     {         编号：4         名称：“ test4”     }，     {         编号：5         名称：“ test5”     }，     {         编号：6         名称：“ test6”     } ] 我不想改变状态，因此在我的Reducer中，如何合并两个值，以便最终输出像这样： {     新闻：{         新闻：             {                 编号：1                 名称：“ test1”             }，             {                 编号：2                 名称：“ test2”             }，             {                 id：3，                 名称：“ test3”             }，             {                 编号：4                 名称：“ test4”             }，             {                 编号：5                 名称：“ test5”             }，             {                 编号：6                 名称：“ test6”             }         ]     }     ] } 我尝试过类似的方法，但是它代替了整个新闻对象。 返回{...状态消息：action.payload} 其中action.payload具有我在响应中获得的值。我知道我可能会错过一些简单而明显的东西。

Answer 1

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

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

Answer 2

这是一个辅助函数，无论结构如何，它都会为您做深层克隆：

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};
    }, {});
}