this.setState не обновляет состояние

Question

По какой-то причине мой this.state вызов не обновляет состояние в моей функции roleClicked. Я не могу понять, в чем проблема. Вот код:

import React, { Component } from 'react'
import { Redirect } from 'react-router-dom';
import instance from '../../../config/axios';
import ls from 'local-storage';
import Sidenav from '../../layout/Sidenav'
import isLoggedIn from '../../../helpers/isLoggedIn';
import redirectToLogin from '../../../helpers/redirectToLogin';
import apiErrorHandler from '../../../helpers/apiErrorHandler';
import RolesHeader from './RolesHeader';
import '../../../App.css'
import { Table, Pagination, Input, Alert } from 'antd';

export default class ViewRoles extends Component {

    state = {
        loggedIn: true,
        roleSelected: false, 
        roleSelectedId: null,
        rolesTable: {
            columns: null,
            dataSource: null,
            currentPageNumber: null,
            currentPageSize: null,
            total: null,
        },
        filters: {
            roleName: null
        },
        displays: {
            createRoleView: false,
            roleCreatedAlert: false,
        },
        errors: null
    }

    componentDidMount = () => {
      //here i make AJAX calls to set rolesTables
    } 

    roleClicked = (record) => {
        console.log("clicked")
        this.setState({
            roleSelected: true,
            roleSelectedId: record.key
        })
    }

    render() {

        if(this.state.roleSelected) {
            const roleUrl = "/roles/" + this.state.roleSelectedId
            return <Redirect to={roleUrl}/>
        }

        return (
            <React.Fragment>
                <Sidenav activeLink="roles"/>
                <Table 
                     className="border"
                     columns={this.state.rolesTable.columns} 
                     dataSource={this.state.rolesTable.dataSource} 
                     pagination={false}
                     onRow={(record) => {
                        return {
                           onClick: () => this.roleClicked(record)
                     }}}
                />
                <Pagination 
                    className="m-3"
                    current={this.state.rolesTable.currentPageNumber} 
                    pageSize={this.state.rolesTable.currentPageSize} 
                    total={this.state.rolesTable.total}
                    onChange={this.loadRolesTable}
                />
           </React.Fragment>)
    }
}

Функция работает как положено, но состояние не обновляется. Любая идея, в чем может быть проблема?

Везде, где я использую this.setState это работает. Полный код можно найти по этой ссылке .

Answer 1

Я обновил роль. Кликнул на это, и это работает. Я до сих пор не понимаю, почему исходный код не работал.

viewRole = async (record) => {
     var currentState = this.state;
     currentState.roleSelected = true;
     currentState.roleSelectedId = record.key;
     await this.setState(currentState);
     console.log(this.state)
} 

Просто изменить его на Asyn c не получилось. Работало только присвоение состояния currentState, а затем обновление currentState и использование его в setState. И теперь он работает как синхронно, так и асинхронно.

Answer 2

попробуйте что-то вроде этого

    this.setState(function(state, props) {
      return {
        ...state,
        roleSelected: true,
        roleSelectedId: record.key
           };
   });