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