this.setState 不更新状态 [英] this.setState not updating state

问题描述

出于某种原因，我的 this.state 调用没有更新我的 roleClicked 函数中的状态.我似乎无法弄清楚问题是什么.代码如下:

For some reason my this.state call is not updating the state in my roleClicked function. I can't seem to figure out what the problem is. Here is the code:

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>)
    }
}

函数按预期运行，但状态未更新.知道可能是什么问题吗?

The function runs as expected but the state is not updated. Any idea what the problem could be?

在我使用 this.setState 的其他任何地方它都有效.完整代码可在此链接上找到.

Everywhere else I use this.setState it works. The full code can be found on this link.

推荐答案

我更新了 roleClicked 到这个，它工作.我仍然不知道为什么初始代码不起作用.

I updated roleClicked to this and it works. I still have no idea why the initial code didn't work.

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 中使用它.现在它可以同步和异步工作.

Just changing it to Async didn't work. Only assigning the state to currentState and then updating currentState and using it in setState worked. And now it works both synchronously and asynchronously.

这篇关于this.setState 不更新状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！