切换复选框并重新加载内容时，Ant Design Table 不会立即更新答案

【问题标题】：Ant Design Table is not updated immediately when switching checkbox and reload content切换复选框并重新加载内容时，Ant Design Table 不会立即更新
【发布时间】：2019-03-21 09:10:09
【问题描述】：

帮助朋友找到错误。

有一个表格，数据从后端加载，数据中有一个boolean variable，在表格中以checkbox显示。当checkbox 改变时，函数改变database 中变量的状态并重新加载数据。但该表仅第二次重绘。据此，checkbox 和记录样式在函数执行后不会更新。

指出在哪里看？

class UsersList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            users: [],
            isLoading: false
        };

        this.onChange = this.onChange.bind(this);
    }

    loadUsersList() {
        let promise = getAllUsers();

        this.setState({
                isLoading: true
            }
        );

        if (!promise) {
            return;
        }

        promise
            .then(response => {
                this.setState({
                    users: response,
                    isLoading: false
                })
            }).catch(error => {
            this.setState({
                isLoading: false
            })
        });
    }

    componentDidMount() {
        this.loadUsersList();
    }

    onChange(e) {
        setEnabled(e.target.value, e.target.checked).then(this.loadUsersList());

        notification.success({
            message: 'Successfully',
            description: "Enabled field of " + e.target.value + " change to " + e.target.checked,
        });
    }

    render() {

        const columns = [{
            title: 'Id',
            dataIndex: 'id',
            key: 'id'
        }, {
            title: 'Name',
            dataIndex: 'name',
            key: 'name'
        }, {
            title: 'Email',
            dataIndex: 'email',
            key: 'email'
        }, {
            title: 'Registered',
            dataIndex: 'registered',
            key: 'registered'
        }, {
            title: 'Enabled',
            dataIndex: 'enabled',
            key: 'enabled',
            render: (text, record) => (
                <Checkbox checked={record.enabled}
                          onChange={this.onChange}
                          value={record.name}/>
            )
        }, {
            title: 'Roles',
            dataIndex: 'roles',
            key: 'roles'
        }
           ];

        return (
            <Table rowClassName={(row) => row.enabled ? '' : 'disabled'}
                   rowKey='id' columns={columns}
                   dataSource={this.state.users}
                   loading={this.state.isLoading}/>
        )
    }
}

export default UsersList;

【问题讨论】：

标签： reactjs checkbox

【解决方案1】：

我不确定这里最好的解决方案是什么，但是由于您使用的是 columns 数组并且没有在下明确指定列，那么您不妨将它放在一个在用户与您的 UI 交互时更新的方法中

用它来访问表格中的列标签，把它放在你的班级之外

const { Column, ColumnGroup } = Table;

【讨论】：