问题描述
单击该行的编辑按钮时，该组件应该将所选实体设置为该行，并将其自身置于“编辑”模式。
但是，当在右上角显示一个框（此处称为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。
我很难理解这一点。 ->自学
解决方法
setState是异步的。您不能期望状态已经改变。
尝试一下：
this.setState({mode: modes.EDIT},() => {
console.log("Mode: " + this.state.mode);
});
在下一次渲染之前，状态更新不会（有必要）反映在this.state中。
来自the docs：
setState（）并不总是立即更新组件。它可能会批量更新或将更新推迟到以后。这使得在调用setState（）之后立即读取this.state可能是一个陷阱。而是使用componentDidUpdate或setState回调
您已经知道该模式，因此可以通过modes.EDIT而不是this.state.mode：
this.toast.show({ detail: "..." + modes.EDIT,life: 3000 });
或使用setState的回调形式，以确保在调用后续的Toast代码之前状态已更新：
this.setState({mode: modes.EDIT},() => this.toast.show( ... ))
注意：因为console.log异步运行，所以您的console.log调用可能会显示更新后的值。 （在您调用它的时间与它在控制台中显示的时间之间，状态可能已更改。）
这是一个公平的问题，但是setState是异步的。因此，要么在其中使用回调函数，要么使用Promise在另一个setState之后执行一些setState
this.setState( (mode) => mode : modes.EDIT)
或
Promise.all(#First Async).then(#Second Async)