react&antd(11)<Table />组件更改dataSource和columns时页面不更新渲染的问题
组件增加一列数据,于是我在该状态下对columns进行操作并把更新后的columns重新setState,但是此时页面的表格并没有更新渲染,我在控制台打印的columns却已经是更新后的了。因为columns和dataSource都是一个对象数组([{},{},{}]),所以我们更改columns/dataSource时引用地址并没有改变,改的只是引用地址指向的内存数据。
·
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改变时重新渲染页面
更多推荐
已为社区贡献2条内容
所有评论(0)