1.state值不可直接修改,且在state操作過程中,也需要确認state原來的值沒被修改。
例如
const [arr,setArr] = useState([1,2,3])
const [obj,setObj] = useState({a:1,b:2})
1.需求:向arr數組加入一個數字4元素,向對象obj加一個屬性c:3
//錯誤寫法:
arr.push(4)
obj.c = 3
// 正确寫法
setArr([...arr,4])
setObj({...obj,c:3})
2.需求 操作過程中需要使用arr或着obj,必須保證操作過程中原來的值不被修改
//我們可以先複制一份arr或者obj的值,再使用這個值去進行操作
const cloneArr = [...arr] 或着const cloneAr = arr.slice()
const cloneObj = {...obj} 或着 Object.assign({},obj) //(隻能實作淺拷貝,如果含有值為對象的屬性,需要用深拷貝)
ps:遞歸實作深拷貝
function deepClone(obj){
let objClone = Array.isArray(obj)?[]:{};
if(obj && typeof obj==="object"){
for(key in obj){
if(obj.hasOwnProperty(key)){
//判斷ojb子元素是否為對象,如果是,遞歸複制
if(obj[key]&&typeof obj[key] ==="object"){
objClone[key] = deepClone(obj[key]);
}else{
//如果不是,簡單複制
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
// 借用JSON對象的 parse 和 stringify 的深拷貝(不可拷貝值為function或着undefined)
function deepClone(obj){
let newObj = JSON.stringify(obj);
let objClone = JSON.parse(newObj);
return objClone;
}
ps結束
接下去再操作cloneArr ,cloneObj