React事件处理程序未按预期分配模式，评估为空

问题描述

我有一个看起来像这样的页面：

单击该行的编辑按钮时，该组件应该将所选实体设置为该行，并将其自身置于“编辑”模式。

但是，当在右上角显示一个框（此处称为toast的组件）时，第一次单击时该模式的评估结果为null：

这是代码：

import React,{ Component } from 'react';

import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { Button } from 'primereact/button';
import { Toast } from 'primereact/toast';

import 'primereact/resources/themes/luna-blue/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';

const modes =
{
    VIEW:   'VIEW',ADD:    'ADD',EDIT:   'EDIT',REMOVE: 'REMOVE'
}

class TestManager extends Component
{
    constructor()
    {
        super();

        let persons = [
            {
                "id": 3,"zipCode": "","cityName": "","streetName": "","houseNbr": "","firstName": "Ahmed","lastName": "Al-Thiab","gender": "MALE",},{
                "id": 4,"firstName": "Stefan","lastName": "Antalovics",{
                "id": 20,"firstName": "Christian","lastName": "Attina",{
                "id": 15,"firstName": "Filmon","lastName": "Berhane",{
                "id": 2,"zipCode": "64895","cityName": "Darmstadt","firstName": "Johannes","lastName": "Loczewski",{
                "id": 1,"zipCode": "22880","cityName": "Wedel","streetName": "Rosengarten","houseNbr": "6","firstName": "Karsten","lastName": "Wutzke",}
        ]
        
        this.state = {entities: persons,selectedEntity: null,mode: null};
        
        this.onRowEdit = this.onRowEdit.bind(this);
        this.onRowRemove = this.onRowRemove.bind(this);
        
        this.actions = this.actions.bind(this);
    }
    
    render()
    {
        var header = "Person Manager (" + this.state.entities.length + ")"

        return (
            <div style={{ maxWidth: 1000,marginLeft: "auto",marginRight: "auto",marginTop: 10,marginBottom: 10 }}>
                
                <Toast ref={(el) => this.toast = el} />
                
                <DataTable value={this.state.entities}
                           header={header}
                           dataKey="id"
                           selection={this.state.selectedEntity}
                           selectionMode="single"
                           sortField='lastName'
                           sortOrder={1}
                           resizableColumns
                           columnResizeMode="fit"
                           className="p-datatable-striped">
                    <Column field="id" header='ID' sortable style={{width:'7.5%'}} />
                    <Column field="gender" header='Sal.' body={this.salutation} sortable style={{width:'10%'}} />
                    <Column field='lastName' header='Last Name' sortable style={{width:'15%'}} />
                    <Column field='firstName' header='First Name' sortable style={{width:'15%'}} />
                    <Column field='streetName' header='Street' body={this.street} sortable style={{width:'20%'}} />
                    <Column field='zipCode' header='ZIP' sortable style={{width:'10%'}} />
                    <Column field='cityName' header='City' sortable style={{width:'10%'}} />
                    <Column field="actions" body={this.actions} style={{width:'12.5%'}} />
                </DataTable>
            </div>
        );
    }

    actions(rowData)
    {
        return (
            <>
                <div style={{textAlign: "center"}}>
                    <Button icon="pi pi-pencil"
                            tooltip="Edit"
                            onClick={() => this.onRowEdit(rowData)}
                            className="p-button-sm p-button-raised p-button-rounded p-button-outlined" />
                    <Button icon="pi pi-trash"
                            tooltip="Remove"
                            className="p-button-sm p-button-raised p-button-rounded p-button-outlined"
                            onClick={() => this.onRowRemove(rowData)}
                            style={{marginLeft: 5}} />
                </div>
            </>
        );
    }

    onRowEdit(rowData)
    {
        this.setState({selectedEntity: rowData});
        this.setState({mode: modes.EDIT});

        console.log("Last name: " + rowData.lastName);
        console.log("Mode: " + this.state.mode);

        this.toast.show({ severity: 'info',summary: 'Editing Person',detail: 'Name: ' + rowData.lastName + "," + this.state.mode,life: 3000 });
    }

    onRowRemove(rowData)
    {
        this.setState({selectedEntity: rowData});
        this.setState({mode: modes.REMOVE});

        this.toast.show({ severity: 'info',summary: 'Removing Person',life: 3000 });
    }

    salutation(rowData)
    {
        var gender = rowData['gender'];

        if ( gender )
        {
            switch( gender )
            {
                case "MALE":
                    return "Mr";
                
                case "FEMALE":
                    return "Mrs";
                
                default:
                    return "Error";
            }
        }

        return null;
    }

    street(rowData)
    {
        var streetName = rowData['streetName'];
        var houseNumber = rowData['houseNbr'];

        return houseNumber ? streetName + " " + houseNumber : streetName;
    }
}

export default TestManager;

问题：

这是怎么了？

据此

Does React keep the order for state updates?

方法回调（也称为事件处理程序，更新模式）应该没有任何问题

onRowEdit(rowData)
{
    this.setState({selectedEntity: rowData});
    this.setState({mode: modes.EDIT});

    console.log("Last name: " + rowData.lastName);
    console.log("Mode: " + this.state.mode);

    this.toast.show({ severity: 'info',life: 3000 });
}

this.state.mode始终是null。在随后的点击中，无论哪一行，都将显示正确的模式。

为什么？

我该如何解决？

顺便说一句：this.state.selectedEntity在使用吐司的行上也是null。

我很难理解这一点。 ->自学

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）