react 项目使用 Ant Design Table表格中使用Checkbox.Group 组件默认值 defaultValue变化页面不刷新

问题描述

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}>