如何在React JS中深度合并对象

Question

{"activities": [
                {
                    "actor": {
                        "id": 409,
                        "avatar": "",
                        "first_name": "Sakthi",
                        "last_name": "Vel",
                        "headline": null,
                        "is_online": false,
                    },
                    "foreign_id": "post.UsPost:253",
                    "id": "ed50e218-f3e8-11e8-8080-800132d8e9c0",
                    "object": {
                        "id": 253,
                        "comments": 0,
                        "likes": 0,
                        "files": [
                            {
                                "id": 112,
                                "file": "",
                                "content_type": "video/mp4",
                                "file_type": "video",
                                "created_at": "2018-11-29T15:10:38.524836Z"
                            }
                        ],
                        "post_type": "post",
                        "is_bookmarked": false,
                        "is_liked": false,
                        "link": "/post/api/v1/253/",
                        "target": "post.UsPost:253",
                        "foreign_id": "post.UsPost:253",
                        "actor": {
                            "id": 409,
                            "avatar": "",
                            "first_name": "Sakthi",
                            "last_name": "Vel",
                            "headline": null,
                            "is_online": false,
                        },
                        "text": "#Multiple video (.mp4) test. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.",
                        "skills": [
                            "VFX"
                        ],
                        "created_at": "2018-11-29T15:10:37.426332Z",
                        "is_link": true,
                        "view_count": 0,
                        "created_by": 409
                    },
                    "origin": "user:409",
                    "target": "",
                    "time": "2018-11-29T15:10:37.426332",
                    "type": "post",
                    "verb": "posted"
                }
                
                
           {
            "activities": [
                {
                    "actor": {
                        "id": 64,
                        "last_name": "",
                        "headline": "Learning is my Passion",
                        "is_online": false,
                        "username": "Uchenna1"
                    },
                    "foreign_id": "post.UsPost:183",
                    "id": "447f6710-eb08-11e8-8080-8001369e78cd",
                    "object": {
                        "id": 183,
                        "comments": 1,
                        "likes": 1,
                        "files": [
                            {
                                "id": 87,
                                "content_type": "image/jpg",
                                "file_type": "image",
                                "created_at": "2018-11-18T08:02:18.759309Z"
                            }
                        ],
                        "post_type": "post",
                        "is_bookmarked": false,
                        "is_liked": false,
                        "link": "/post/api/v1/183/",
                        "target": "post.UsPost:183",
                        "foreign_id": "post.UsPost:183",
                        "actor": {
                            "id": 64,
                            "first_name": "Uchenna",
                            "last_name": "",
                            "headline": "Learning is my Passion",
                            "is_online": false,
                            "username": "Uchenna1"
                        },
                        "text": "This is codigo",
                        "skills": [
                            "Javascript"
                        ],
                        "created_at": "2018-11-18T08:02:17.626600Z",
                        "is_link": true,
                        "view_count": 10,
                        "created_by": 64
                    },
                    "origin": "user:64",
                    "target": "",
                    "time": "2018-11-18T08:02:17.626600",
                    "type": "post",
                    "verb": "posted"
                }
            ],
            "activity_count": 1,
            "actor_count": 1,
            "created_at": "2018-11-18T08:02:18.647108",
            "group": "posted_2018-11-18",
            "id": "451b1eab-eb08-11e8-8080-80007915e2b6.posted_2018-11-18",
            "is_read": false,
            "is_seen": true,
            "updated_at": "2018-11-18T08:02:18.647108",
            "verb": "posted"
        }

我在合并两个对象时遇到问题。下面是两个对象和结果的捕捉。

在上面的图片中，我要合并旧数据和新数据

，但合并后输出错误，即新的更新数据。

我正在使用命令来做。

let newData = { ...a , ...b }

 console.log('new updated data: ',newData)

我也在分派之前在redux动作中执行此操作。

这里{“活动”：[....]，....}是一个对象，我想与下面的对象合并。

Answer 1

您能澄清一下您的对象是否有一个属于对象或数组的子对象，如果您是说这不是要合并这些东西或根本不合并任何东西？

例如：

let oldData = {
      key: value, 
      key1: { childkey1: value1 }
}

如果您有类似的问题，并且问题如我所解释。这是因为javascript不会进行深度合并。它会进行浅层合并。

最简单的选择是使用像lodash这样的具有深度合并功能的库。