Как обновить состояние компонента класса из функционального компонента - PullRequest
Новая
       57

Как обновить состояние компонента класса из функционального компонента

0 голосов
/ 29 апреля 2020

Я использую разбиение на страницы в моем проекте, здесь компонент разбивки на страницы является функциональным, я пытаюсь обновить 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

мой код оператора представления здесь я также устанавливаю состояние currentPage как 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>
...