在项目中经常会遇到各种需要修改、编辑的操作，一般的思路就是点击编辑的时候，通过record获取到这一整行数据存入当前的state中，然后将这个state值传到编辑的页面中，在编辑界面中，通过this.props.传过来的名称去获取所有数据，当发生改变时，需要将当前修改的值传到从父组件，然后父组件去修改之前的state。这样的思路是没有任何问题的，但是在写法上面，使自己犯了一个很严重的错误，错误案例如下：假如我编辑表格的一行数据，我编辑都是可以改变的，但是我还没点击确定，表格的那一行数据也发生了改变，这就导致了我如果编辑了这一行数据，但是我最后点击了取消按钮，编辑模态框消失，但是表格的这一行数据还是发生了改变，尽管这个改变没有存放到数据库中，对于这个问题之前一直没有想明白是为什么，不得已只能采取粗暴的解决办法了，在编辑点击取消按钮之后，我重新发了一次请求，重新获取表格数据，这样才暂时隐藏了这个问题。昨晚也是一个类似的问题，然后冰哥教了我一大招，我这才恍然大悟。
之前关于编辑的一般写法是：
editEnumsDesc(desc,index){
const a = this.state.editData;//把这个对象赋值给a
let b = [];
if(a.ext.enums){
b = a.ext.enums;
}
for(let i=0;i< b.length;i++){
if(i === index){
b[i].desc = desc;//虽然说这里还没有setState,但是也相当于在操作editData
}
}
a.ext.enums = b;
this.setState({
editData:a
});
}
然后冰哥帮我改了一下代码：
写法一：
consta=JSON.parse(JSON.stringify(this.state.editData));
a.ext.enums[index].desc=desc;
this.setState({
editData:a
});
写法二：
this.setState((prevState)=>{prevState.editData.ext.enums[index].value=value});
原来最大的问题：就在于最初的赋值，也就是对象的复制问题。
百度了一下，关于对象的复制也是大有文章的，主要分为两种类型：深复制和浅复制。
数据类型主要分为：简单数据类型(Boolean、Null、Undefined、Number、String、Symbol）和复杂数据类型（Object）。
“=”主要用于简单数据类型的赋值问题，如果用在Object中，例如存在Object b={'value':'111'},a = b;那么当a中改变value的值时，b中的value值也改变了。Object a 是等于 Object b的。
深复制和浅复制主要是针对Object而言的，浅复制只复制一层对象的属性，而深复制则递归复制了所有层级。也就是说浅复制只赋值了对象的第一层属性，当对象的第一层属性发生改变的时候，两个对象互不影响，但是当第二层对象发生改变的时候，两个对象都会发生改变。而深复制不会这样，两个对象彻彻底底是不一样的，会不影响。
浅复制就是简单的引用：
var src = {
name:"src"
}
//复制一份src对象的应用
var target = src;
target.name ="target";
console.log(src.name);//输出target
深复制的方法：JSON.parse(JSON.stringify());
var source = {
name:"source",
child:{
name:"child"
}
}
var target = JSON.parse(JSON.stringify(source));
//改变target的name属性
target.name ="target";
console.log(source.name);//source
console.log(target.name);//target
//改变target的child
target.child.name ="target child";
console.log(source.child.name);//child
console.log(target.child.name);//target child
以上方法都是个人总结，如有错误，欢迎指正！
网友评论