react&antd（11）＜Table /＞组件更改dataSource和columns时页面不更新渲染的问题

1、背景

在开发中有一个需求时在特定状态时

组件增加一列数据，于是我在该状态下对columns进行操作并把更新后的columns重新setState，但是此时页面的表格并没有更新渲染，我在控制台打印的columns却已经是更新后的了。在查阅后发现是数据类型的问题。因为columns和dataSource都是一个对象数组（[{},{},{}]），所以我们更改columns/dataSource时引用地址并没有改变，改的只是引用地址指向的内存数据。此时react认为虚拟DOM并没有发生更改，于是就不会重新渲染页面。

2、解决方法

解决方法也很简单，思路就是深拷贝重新生成一个新的引用地址，然后setState时react就可以比对出这里是发生了变化了。
1、…解构

let columns = [...this.state.columns]
//更改columns的操作
this.setState({
	columns
})

2、json序列化和反序列化

let columns = JSON.parse(JSON.stringify(this.state.columns))
//更改columns的操作
this.setState({
	columns
})

3、引入lodash库

import { cloneDeep } from 'lodash';
let columns = cloneDeep(this.state.columns) 
//更改columns的操作
this.setState({
	columns
})

上面几种方式都可以使columns/dataSource改变时重新渲染页面