时间戳

首页 > 解决方案 > 切换复选框并重新加载内容时，Ant Design Table 不会立即更新

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

问题描述

帮助朋友找到错误。

有一个表，数据是从后端加载的，数据中有一个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;

标签： reactjscheckbox

解决方案

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

使用它来访问表中的列标记，将其放在您的班级之外

const { Column, ColumnGroup } = Table;

推荐阅读