mardi 16 octobre 2018

Ant Design Table is not updated immediately when switching checkbox and reload content

Help friends find a bug.

There is a table, data is loaded from the backend, there is a boolean variable in the data, which is displayed in the table by the checkbox. When the checkbox is changed, the function changes the state of a variable in the database and reloads the data. But the table is redrawn only for the 2nd time. In accordance with this, the checkbox and record styles are not updated after the function has been executed.

Point out where to look? )

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;




Aucun commentaire:

Enregistrer un commentaire