如何解决反应更新状态落后一步
所以我的意图是每次单击下一页箭头时，状态都会更新页码并调用 getData() 从远程数据库获取数据，然后更新状态中的 work_orders。但问题是状态不会立即更新：它总是落后一步。我从谷歌搜索中尝试了很多解决方案，但没有任何效果。想知道是否有人知道如何解决这个问题？ redux 或 hooks 能解决这个问题吗？
谢谢。
ps：抱歉代码看起来有点乱，我尝试了太多东西。
export default class TableList extends React.Component {
state = {
work_orders:[],// search : "",URL : 'http://localhost:8000/api/',query: {
paginate : {
page: 1,pageSize: 20,totalPage: 0,totalRows: 0,startIndex: 0,endIndex: 0,},condition: [],sorting: {
id: 0,order: "ASC",search: "",columns: [
{ title: 'WOID',field: 'WOID',type: 'numeric'},{ title: 'Quantity',field: 'quantity',{ title: 'Order Status',field: 'orderStatus',{ title: 'Start Date',field: 'startDate',{title: 'End Date',field: 'endDate',}],}
handleSearchChange =(text)=>{
this.setState(prevState=>({
query:{
...prevState.query,search: text,}
}));
console.log('query search is' + this.state.query.search);
this.getData();
}
componentDidMount(prevProps,prevState,snapshot){
console.log("did mount");
this.getData();
}
// static getDerivedStateFromProps(){
// this.getData();
// }
getData=()=>{
console.log('IN getDate');
var url = this.state.URL + 'test?'
var query = this.state.query;
console.log("page is: " + this.state.query.paginate.page);
Axios.post( url,query).then(result=>{
console.log("page is: " + this.state.query.paginate.page);
var pagi = result.data.pop();
console.log("pagi is " + pagi.page);
this.setState(prevState=>({
query:{
...prevState.query,paginate:{
...prevState.query.paginate,totalRows: pagi.totalRows,totalPage: pagi.totalPage,startIndex: pagi.startIndex,endIndex: pagi.endIndex,}
}}))
this.setState({work_orders: [...result.data]});
})}
componentDidUpdate(){
}
shouldComponentUpdate(){
return true;
}
handleFilterChange=(id_,val_)=>{
var fl = false;
if(this.state.query.condition.flag == false){
fl = true;
}
this.setState(prevState=>({
...prevState,query:{
...prevState.query,condition: [
...prevState.query.condition,{id: id_,val: val_}
]
}
}
))
this.getData();
console.log(this.state);
// this.getData()
}
// componentDidUpdate(){
// this.getData();
// }
handleNextButtonClick= () =>{
console.log("in handle next");
this.setState((prevState,props)=>{
return{
...prevState,query:{
...prevState.query,paginate: {
...prevState.query.paginate,page: prevState.query.paginate.page + 1,}
}
}
}
);
console.log('page is ' + this.state.query.paginate.page);
this.getData();
}
handlePrevButtonClick=()=>{
this.setState(prevState=>({
...prevState,query:{
...prevState.query,paginate: {
...prevState.query.paginate,page: prevState.query.paginate.page - 1,}
}
}))
this.getData();
}
handleFirstButtonClick=()=>{
this.setState(prevState=>({
...prevState,page: 1,endIndex: prevState.query.paginate.pageSize
}
}
}))
this.getData();
}
handleLastButtonClick=()=>{
this.setState(prevState=>({
...prevState,page: prevState.query.paginate.totalPage,}
}
}))
this.getData();
}
render(){
console.log(this.state.work_orders);
return (
<div>
<MaterialTable
options={{
sorting: true,filtering: false,search: true,exportButton: true,pageSizeOptions: [5,20,50,100],thirdSortClick: true,initialPage: 0,debounceInterval: 500,paging: true,}}
// data = {this.state.work_orders}
columns={this.state.query.columns}
data={this.state.work_orders}
title="Work Orders"
components={{
Toolbar: props => (<MTableToolbar
{...props}
ref={ref => (this.child = ref)}
setState={state => this.setState(state)}
onSearchChanged={debounce((searchtext) => {
console.log('the text is: ' + searchtext);
// const query = {...this.child.state.query}
// this.child.setState({searchText: text});
this.handleSearchChange(searchtext);
},500)}
/>),Pagination: props => (<CustomPagination
{...props}
rowsPerPage = {this.state.query.paginate.pageSize}
pageIndex = {this.state.query.paginate.page}
count = {this.state.query.paginate.totalPage}
rows={this.state.query.paginate.totalRows}
startIndex={this.state.query.paginate.startIndex}
endIndex={this.state.query.paginate.endIndex}
handleNextButtonClick={this.handleNextButtonClick}
handlePrevButtonClick={this.handlePrevButtonClick}
handleFirstButtonClick={this.handleFirstButtonClick}
handleLastButtonClick={this.handleLastButtonClick}
/>)
}}
/>
</div>
);
}
}<!-- begin snippet: js hide: false console: true babel: false -->function CustomPagination (props){
const handleNextButtonClick=()=>{
props.handleNextButtonClick();
}
const handlePrevButtonClick=()=>{
props.handlePrevButtonClick();
}
const handleFirstButtonClick=()=>{
props.handleFirstButtonClick();
}
const handleLastButtonClick=()=>{
props.handleLastButtonClick();
}
return(
<div style={{
display: 'grid',paddingTop: '10px',gridTemplateColumns: '15% 25% 20% 25% 15%'
}}>
<Tooltip title={'FirstPage'}>
<span >
<IconButton color="primary" onClick={handleFirstButtonClick} style={{float: 'left'}} >
<FirstPageIcon fontSize="large" />
</IconButton>
</span>
</Tooltip>
<Tooltip title={'PrevPage'} >
<span>
<IconButton color="primary" onClick={handlePrevButtonClick} style={{float: 'left'}} >
<NavigateBeforeIcon fontSize="large" />
</IconButton>
</span>
</Tooltip>
<span>
<p style={{
paddingBottom: '5px',paddingTop: '5px',marginBottom: '0',marginTop: '0',// backgroundColor: 'blue',textAlign: 'center',}}>{props.startIndex} to {props.endIndex} from {props.rows}
</p>
</span>
<Tooltip title={'NextPage'}>
<span>
<IconButton color="primary" style={{float: 'right'}} onClick={handleNextButtonClick}>
<NavigateNextIcon fontSize="large" />
</IconButton>
</span>
</Tooltip>
<Tooltip title={'LastPage'} >
<span>
<IconButton color="primary" style={{float: 'right'}} onClick={handleLastButtonClick}>
<LastPageIcon fontSize="large" />
</IconButton>
</span>
</Tooltip>
</div>
);
}
export default CustomPagination;
解决方法
问题是状态改变会在当前函数执行后异步发生。 一种可能的解决方案是使用回调函数作为 setState 的第二个参数，这会强制在状态更改后调用回调：
handleSearchChange = (text) => {
this.setState(
prevState => ({
...prevState,query:{
...prevState.query,search: text,}
}),() => {
console.log('query search is' + this.state.query.search);
this.getData();
}
);
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
