react 项目使用 Ant Design Table表格中使用Checkbox.Group 组件默认值 defaultValue变化页面不刷新
互联网 2022/5/14 6:24:32
问题描述
react 项目使用 Ant Design Table表格中使用Checkbox.Group 组件默认值 defaultValue变化页面不刷新。
const columns = [
{
title:'标签',
dataIndex:"labelCodes",
key:"labelCodes",
width:500,
render:(text,record) =>(
<Checkbox.Group defaultValue={record.labelCodes} key={record.labelCodes}>{
this.state.labelList.map(item => (
<Checkbox
key={item.value}
value={item.value}
onChange={(e) => this.onChange(e,record.id)}>{item.label}</Checkbox>
))
}
</Checkbox.Group>
)
},
];
<Table columns={columns} dataSource={this.state.itemList} />
当接口请求返回的this.state.itemList数据发生变化时，传递给页面表格中的Checkbox.Group defaultValue的值发生变化但页面不能刷新。使用this.forceUpdate()以及setState({ itemList:[...itemList]})均没有效果。
解决办法
-
Checkbox.Group添加key为defaultValue的值**，即可当this.state.itemList.labelCodes变化时，页面可以取到数据更新之后的最新视图。<Checkbox.Group defaultValue={record.labelCodes} key={record.labelCodes}> -
将
defaultValue属性更改为value属性。<Checkbox.Group value={record.labelCodes} key={record.labelCodes}>
关于找一找教程网
本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。
[react 项目使用 Ant Design Table表格中使用Checkbox.Group 组件默认值 defaultValue变化页面不刷新]http://www.zyiz.net/tech/detail-320800.html
- 2022-05-27js 垃圾回收
- 2022-05-272022/05/27: VUE配置代理
- 2022-05-26linux下安装nodejs最新版
- 2022-05-26vue3+quasar+capacitor开发多平台项目,使用quasar改变主题背景
- 2022-05-26vue3在setup中将函数赋给对象外调用，访问不到setup内部变量
- 2022-05-25React 服务器端渲染配置 CSS Module 的方法
- 2022-05-250008 Ajax和Json知识点
- 2022-05-25【测试平台开发】22. 接口断言功能-前端vue组件开发
- 2022-05-25JS学习笔记——函数的定义和参数获取
- 2022-05-25Vue源码分析[1][模拟插值语法]
