How to Update State of class component from functional component

问题

Am Using pagination in my project here pagination component is a functional one am trying to update the currentPage which is state of view statement component.when i debug the code in the initial render i get props as undefined & if i click next the state is not updated immediately it calls the props.tableRow() and then again comes back to pagination updates the state before this details get mapped. need some solution thanks in advance

import React ,{useState} from 'react'
import { Card, InputGroup, FormControl, Button } from 'react-bootstrap'

 function Pagination(props) {
     debugger
     const intialstate = props.currentPage
     const [currentPage, setcurrentPage] = useState(intialstate);
    // const lastIndex = props.currentPage * props.detailsperpage;
    // const firstIndex = lastIndex - props.detailsperpage;
    // const currentDetails = props.details.slice(firstIndex,lastIndex);
    const totalpages = props.details.length / props.detailsperpage;

    const pageNumcss = {
       width :"45px",
       border : "1px solid #17A2BB",
       color:"#17A2BB",
       textAlign: "center", 
       fontWeight : "bold"
    }

 const changePage = event => {
    if (event.target.name === null) {
        setcurrentPage({
        currentPage : 1
      })
    }
    setcurrentPage({
     [event.target.name] : event.target.value
    });
  };

  const firstPage = () =>{
    if (props.currentPage > 1) {
      setcurrentPage({
        currentPage : 1
      })
      props.tabRow({currentPage : currentPage })
    }

  };
  const prevPage = () =>{
    if (props.currentPage > 1) {
     setcurrentPage(prevCurrentpage =>({
       currentPage : prevCurrentpage - 1
     }));     
     props.tabRow({currentPage : currentPage})
    }
 };

 const nextPage = () =>{  
     debugger
   let condition = Math.ceil(props.details.length/props.detailsperpage)
   if (props.currentPage < condition) {
     setcurrentPage( prevCurrentpage => ({   
       currentPage : prevCurrentpage + 1
     }));   
     props.tabRow({currentPage : currentPage })
    }
 };

 const lastPage = () =>{
   let condition = Math.ceil(props.details.length/props.detailsperpage)
   if (props.currentPage < condition) {
     setcurrentPage({
       currentPage : condition
     })     
     props.tabRow(currentPage)
    }

 };

    return (
        <div>
             <Card.Footer >
            <div style={{float:"left"}}>
             showing page {props.currentPage} of {totalpages}
            </div>
            <div style={{float:"right"}}>
              <InputGroup size="sm">
              <InputGroup.Prepend>
                 <Button type="button" variant="outline-info" disabled={props.currentPage === 1 ? true : false} onClick={firstPage}>
                   First
                 </Button>
                 <Button type="button" variant="outline-info" disabled={props.currentPage === 1 ? true : false} onClick={prevPage}>
                   Prev
                 </Button>
              </InputGroup.Prepend>
              <FormControl disabled style={pageNumcss} name="currentPage" value={props.currentPage} onChange={changePage}/>
              <InputGroup.Append>
                 <Button type="button" variant="outline-info" disabled={props.currentPage === totalpages ? true : false} onClick={nextPage}>
                   Next
                 </Button>
                 <Button type="button" variant="outline-info" disabled={props.currentPage === totalpages ? true : false} onClick={lastPage}>
                   Last
                 </Button>
              </InputGroup.Append>
              </InputGroup>
          </div>
          </Card.Footer>
        </div>
    )
}
export default Pagination

my view statement code here i also set the currentPage state as 1 for the initial render of details

  tabRow = (currentPage) => { 
      debugger
      const lastIndex = this.state.currentPage * this.state.detailsperpage;
      const firstIndex =  lastIndex - this.state.detailsperpage;
      const currentDetails = this.state.details.slice(firstIndex,lastIndex); 
      console.log(this.state.currentPage,"state")
      console.log(currentPage,"prop");
      return currentDetails.map(function(object, i){ 
          return <Table obj={object} key={i} />;    
      });   
    }  
    <Pagination currentPage={currentPage} detailsperpage={detailsperpage} details={details} tabRow={this.tabRow}  ></Pagination>

来源：https://stackoverflow.com/questions/61501415/how-to-update-state-of-class-component-from-functional-component