Question

所以我的意图是每次单击下一页箭头时，状态都会更新页码并调用 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', type: 'numeric'},
        { 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,
    query:{
      ...prevState.query,
      paginate: {
        ...prevState.query.paginate,
        page: 1,
        startIndex: 0,
        endIndex: prevState.query.paginate.pageSize
      }
    }
  }))
    this.getData();
}

handleLastButtonClick=()=>{
  this.setState(prevState=>({        
    ...prevState,
    query:{
      ...prevState.query,
      paginate: {
        ...prevState.query.paginate,
        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,
         pageSize: 20,
         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;

Answer 1

问题是状态改变会在当前函数执行后异步发生。一种可能的解决方案是使用回调函数作为 setState 的第二个参数，这会强制在状态更改后调用回调：

handleSearchChange = (text) => {
  this.setState(
    prevState => ({
      ...prevState,
      query:{
        ...prevState.query,
        search: text,
      }
    }), 
    () => {
      console.log('query search is' + this.state.query.search);
      this.getData();
    }
  );
}

反应更新状态落后一步

1 个答案: