如何从功能组件更新类组件的状态

Question

Am在我的项目中使用分页功能，分页功能是一种功能，它试图更新currentPage，它是视图状态语句的状态。当我调试初始渲染中的代码时，道具会变为未定义＆如果我单击下一步，状态不会立即更新，而是调用props.tableRow（），然后再次返回分页更新状态，然后再映射此详细信息。 需要一些解决方案，在此先感谢

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

我的视图语句代码在这里 我还将当前页面的状态设置为1，以进行详细信息的初始呈现

  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>