首先，說一下我所遇到的問題，我所做的項目是用的基於react的antd框架。

　一張表格，裏面的數據是從後臺獲取直接渲染，我點擊修改按鈕，在modal彈框中修改數據，但是沒有點擊確定，點擊取消，發現頁面上的數據也被修改了，一刷新頁面，數據就還原了。　

　糾結了很久，網上好像也沒有類似的問題，百度了很久才知道原來是要深度復制的原因，所以寫的博客記錄一下。

1.問題的原因

　以前用angular做項目，也遇到過類似問題。由於angular中雙向綁定的問題，問題比在react中還明顯一些，在modal彈框中輸入什麽馬上就會呈現在頁面上，這時彈框還是存在的。

這些問題都是由於淺復制造成的，由於表格數據（彈框中）和表格數據他們都指向同一個URL，所以改變一個，另一個也會隨著改變。

在angular項目中，直接使用angular.copy就可以直接深度復制

2.什麽是深度復制

引用網上的圖說明一下

深度復制把一個對象所有結構都復制下來了

在看一下淺度復制

淺度復制就是把上面一層復制了，下面的指向了原本對象的地址，這樣很省事，速度也快，但是會出現一些問題，如果改變其中一個，另一個就會隨之改變。這也就是我在項目中遇到的問題。

3.解決方法

在要修改數據的表格中，就要使用深度復制到選中的那條數據

我所使用的方法是同stringify轉化一下，在用parse轉回來，這個不需要引用什麽，我覺得比較方便。

我就不多介紹深度復制的方法了，網上一收就有很多。

react中需要用到【深度復制】的問題