react 项目使用 Ant Design Table表格中使用Checkbox.Group 组件默认值 defaultValue变化页面不刷新(React project uses ant design table, and checkbox is used in the table The default value of the group component is changed, and the page is not refreshed)

问题描述

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变化时,页面可以取到数据更新之后的最新视图。

  • 将defaultValue属性更改为value属性。

————————

Problem description

React project uses ant design table, and checkbox is used in the table The default value of the group component changes and the page is not refreshed.

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

When the data returned by the interface request changes, the value passed to the page table changes, but the page cannot be refreshed. There is no effect in using and.

this.state.itemList
Checkbox.Group defaultValue
this.forceUpdate()
setState({ itemList:[...itemList]})

terms of settlement

  • Checkbox.Group添加key为defaultValue的值**,即可当this.state.itemList.labelCodes变化时,页面可以取到数据更新之后的最新视图。

  • 将defaultValue属性更改为value属性。