antd state使用_antd-编辑操作

在项目中经常会遇到各种需要修改、编辑的操作，一般的思路就是点击编辑的时候，通过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

以上方法都是个人总结，如有错误，欢迎指正！