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可以正常工作。完整的代码可以在此link上找到。

Answer 1

我更新了roleClicked至此，它可以正常工作。我仍然不知道为什么初始代码不起作用。

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

仅将其更改为Async无效。仅将状态分配给currentState，然后更新currentState并在setState中使用它。现在，它可以同步和异步运行。

Answer 2

尝试这样的事情

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

this.setState不更新状态

2 个答案: