ReactJS钩子-我尝试将componentWillMount和componentDidUpdate分页转换为ReactJS钩子,但失败
我有分页代码,它工作得非常好(感谢Jason Watmore的分享)。 代码使用ReactJS生命周期组件WillMount和componentDidUpdate 我尝试更改代码,使其在ReactJS钩子中工作。 请帮我核实一下我错在哪里。 代码比较如下:ReactJS钩子-我尝试将componentWillMount和componentDidUpdate分页转换为ReactJS钩子,但失败,reactjs,pagination,react-hooks,Reactjs,Pagination,React Hooks,我有分页代码,它工作得非常好(感谢Jason Watmore的分享)。 代码使用ReactJS生命周期组件WillMount和componentDidUpdate 我尝试更改代码,使其在ReactJS钩子中工作。 请帮我核实一下我错在哪里。 代码比较如下: import React from 'react'; import PropTypes from 'prop-types'; const propTypes = { items: PropTypes.array.isRequired
import React from 'react';
import PropTypes from 'prop-types';
const propTypes = {
items: PropTypes.array.isRequired,
onChangePage: PropTypes.func.isRequired,
initialPage: PropTypes.number,
pageSize: PropTypes.number
}
const defaultProps = {
initialPage: 1,
pageSize: 10
}
class Pagination extends React.Component {
constructor(props) {
super(props);
this.state = { pager: {} };
}
componentWillMount() {
// set page if items array isn't empty
if (this.props.items && this.props.items.length) {
this.setPage(this.props.initialPage);
}
}
componentDidUpdate(prevProps, prevState) {
// reset page if items array has changed
if (this.props.items !== prevProps.items) {
this.setPage(this.props.initialPage);
}
}
setPage(page) {
var { items, pageSize } = this.props;
var pager = this.state.pager;
if (page < 1 || page > pager.totalPages) {
return;
}
// get new pager object for specified page
pager = this.getPager(items.length, page, pageSize);
// get new page of items from items array
var pageOfItems = items.slice(pager.startIndex, pager.endIndex + 1);
// update state
this.setState({ pager: pager });
// call change page function in parent component
this.props.onChangePage(pageOfItems);
}
getPager(totalItems, currentPage, pageSize) {
// default to first page
currentPage = currentPage || 1;
// default page size is 10
pageSize = pageSize || 10;
// calculate total pages
var totalPages = Math.ceil(totalItems / pageSize);
var startPage, endPage;
if (totalPages <= 10) {
// less than 10 total pages so show all
startPage = 1;
endPage = totalPages;
} else {
// more than 10 total pages so calculate start and end pages
if (currentPage <= 6) {
startPage = 1;
endPage = 10;
} else if (currentPage + 4 >= totalPages) {
startPage = totalPages - 9;
endPage = totalPages;
} else {
startPage = currentPage - 5;
endPage = currentPage + 4;
}
}
// calculate start and end item indexes
var startIndex = (currentPage - 1) * pageSize;
var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
// create an array of pages to ng-repeat in the pager control
var pages = [...Array((endPage + 1) - startPage).keys()].map(i => startPage + i);
// return object with all pager properties required by the view
return {
totalItems: totalItems,
currentPage: currentPage,
pageSize: pageSize,
totalPages: totalPages,
startPage: startPage,
endPage: endPage,
startIndex: startIndex,
endIndex: endIndex,
pages: pages
};
}
render() {
var pager = this.state.pager;
if (!pager.pages || pager.pages.length <= 1) {
// don't display pager if there is only 1 page
return null;
}
return (
<ul className="pagination">
<li className={pager.currentPage === 1 ? 'disabled' : ''}>
<a onClick={() => this.setPage(1)}>First</a>
</li>
<li className={pager.currentPage === 1 ? 'disabled' : ''}>
<a onClick={() => this.setPage(pager.currentPage - 1)}>Previous</a>
</li>
{pager.pages.map((page, index) =>
<li key={index} className={pager.currentPage === page ? 'active' : ''}>
<a onClick={() => this.setPage(page)}>{page}</a>
</li>
)}
<li className={pager.currentPage === pager.totalPages ? 'disabled' : ''}>
<a onClick={() => this.setPage(pager.currentPage + 1)}>Next</a>
</li>
<li className={pager.currentPage === pager.totalPages ? 'disabled' : ''}>
<a onClick={() => this.setPage(pager.totalPages)}>Last</a>
</li>
</ul>
);
}
}
Pagination.propTypes = propTypes;
Pagination.defaultProps = defaultProps;
export default Pagination;
从“React”导入React;
从“道具类型”导入道具类型;
常量属性类型={
项目:需要PropTypes.array.isRequired,
onChangePage:PropTypes.func.isRequired,
初始页:PropTypes.number,
页面大小:PropTypes.number
}
const defaultProps={
首字母页码:1,
页面大小:10
}
类分页扩展了React.Component{
建造师(道具){
超级(道具);
this.state={pager:{};
}
组件willmount(){
//如果项目数组不为空,则设置页面
if(this.props.items&&this.props.items.length){
this.setPage(this.props.initialPage);
}
}
componentDidUpdate(prevProps、prevState){
//如果项目数组已更改,请重置页面
if(this.props.items!==prevProps.items){
this.setPage(this.props.initialPage);
}
}
设置页面(第页){
var{items,pageSize}=this.props;
var pager=this.state.pager;
如果(第<1页| |页>寻呼机总页数){
返回;
}
//获取指定页面的新寻呼机对象
pager=this.getPager(items.length、page、pageSize);
//从项目数组中获取项目的新页面
var pageOfItems=items.slice(pager.startIndex,pager.endIndex+1);
//更新状态
this.setState({pager:pager});
//在父组件中调用更改页函数
此.props.onChangePage(pageOfItems);
}
getPager(totalItems、currentPage、pageSize){
//默认为第一页
当前页面=当前页面| | 1;
//默认页面大小为10
pageSize=pageSize | | 10;
//计算总页数
var totalPages=Math.ceil(totalItems/pageSize);
var起始页,结束页;
if(总页数起始页+i);
//返回具有视图所需的所有寻呼机属性的对象
返回{
totalItems:totalItems,
currentPage:currentPage,
pageSize:pageSize,
totalPages:totalPages,
起始页:起始页,
endPage:endPage,
startIndex:startIndex,
endIndex:endIndex,
页数:页数
};
}
render(){
var pager=this.state.pager;
如果(!pager.pages | | pager.pages.length功能组件中没有此
。您可以直接访问功能,而无需此
用法
为了使用钩子中的道具,你可以使用
const Pagination = (props) => {
return (<></>)
}
const分页=(props)=>{
返回()
}
或者你可以分解道具
const Pagination=({items,initialPage,onChangePage,pageSize})
由于功能组件中没有此
绑定,因此需要使用挂钩来维护状态和生命周期。在从类迁移到功能组件之前,请参阅以下指南:
import React, { useState } from "react";
import { useQuery } from "@apollo/react-hooks";
import { gql } from "apollo-boost";
const QUERY = gql`
{
assessments (limit: 84000, sort: "item:asc") {
id
item
title
label
description
image {
url
}
}
}
`;
function AssessmentList(props) {
const { loading, error, data } = useQuery(QUERY);
const [ page, setPage ] = useState(1);
const getPager = (totalItems, currentPage, pageSize) => {
currentPage = currentPage || 1;
pageSize = pageSize || 25;
var totalPages = Math.ceil(totalItems / pageSize);
var startPage, endPage;
if (totalPages <= 10) {
startPage = 1;
endPage = totalPages;
} else {
if (currentPage <= 6) {
startPage = 1;
endPage = 10;
} else if (currentPage + 4 >= totalPages) {
startPage = totalPages - 9;
endPage = totalPages;
} else {
startPage = currentPage - 5;
endPage = currentPage + 4;
}
}
var startIndex = (currentPage - 1) * pageSize;
var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
var pages = [...Array((endPage + 1) - startPage).keys()].map(i => startPage + i);
return {
totalItems: totalItems,
currentPage: currentPage,
pageSize: pageSize,
totalPages: totalPages,
startPage: startPage,
endPage: endPage,
startIndex: startIndex,
endIndex: endIndex,
pages: pages
};
}
if (error) return "Error loading assessments";
if (loading) return <h1>Fetching</h1>;
if (data.assessments && data.assessments.length) {
const searchQuery = data.assessments.filter((query) => {
return Object.keys(query).some(key => query[key].toString().toLowerCase().includes(props.search))
});
const pageSize = 24;
const paging = getPager(searchQuery.length, page, pageSize);
const pageOfItems = (searchQuery.slice(paging.startIndex, paging.endIndex + 1));
if (pageOfItems.length != 0) {
return (
<div>
<ul className="image-list">
{pageOfItems.map((res) => (
<li key={res.id} className="image-list__item">
<div className="image__flow thumbnail">
<img src={`${process.env.NEXT_PUBLIC_API_URL}${res.image.url}`} alt="assessment" />
<h4>{res.title}</h4>
<h4>Label</h4>
<h4>{res.label}</h4>
<h5>Assetcode</h5>
<h5>{res.item}</h5>
</div>
</li>
))}
</ul>
<nav aria-label="Page navigation example">
<ul className="pagination" style={{cursor: 'pointer'}}>
<li className={paging.currentPage == 1 ? "page-item disabled" : "page-item"}>
<a className="page-link" onClick={() => setPage(1)}>First</a>
</li>
<li className={paging.currentPage == 1 ? "page-item disabled" : "page-item"}>
<a className="page-link" onClick={() => setPage(paging.currentPage - 1)}>Prev</a>
</li>
{paging.pages.map((page, index) =>
<li key={index} className="page-item">
<a className="page-link" onClick={() => setPage(page)}>{page}</a>
</li>
)}
<li className={paging.currentPage == paging.totalPages ? "page-item disabled" : "page-item"}>
<a className="page-link" onClick={() => setPage(paging.currentPage + 1)}>Next</a>
</li>
<li className={paging.currentPage == paging.totalPages ? "page-item disabled" : "page-item"}>
<a className="page-link" onClick={() => setPage(paging.totalPages)}>Last</a>
</li>
</ul>
</nav>
</div>
);
} else {
return <h1>No Assessment</h1>;
}
}
}
export default AssessmentList;
import React, { useState, useEffect } from "react";
import { useQuery } from "@apollo/react-hooks";
import { gql } from "apollo-boost";
const QUERY = gql`
{
assessments (limit: 84000, sort: "item:asc") {
id
item
title
label
description
image {
url
}
remark
}
}
`;
function AssessmentList() {
const { loading, error, data } = useQuery(QUERY);
const [ page, setPage ] = useState(1);
const [ search, setSearch ] = useState("");
const getPager = (totalItems, currentPage, pageSize) => {
currentPage = currentPage || 1;
pageSize = pageSize || 25;
var totalPages = Math.ceil(totalItems / pageSize);
var startPage, endPage;
if (totalPages <= 10) {
startPage = 1;
endPage = totalPages;
} else {
if (currentPage <= 6) {
startPage = 1;
endPage = 10;
} else if (currentPage + 4 >= totalPages) {
startPage = totalPages - 9;
endPage = totalPages;
} else {
startPage = currentPage - 5;
endPage = currentPage + 4;
}
}
var startIndex = (currentPage - 1) * pageSize;
var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
var pages = [...Array((endPage + 1) - startPage).keys()].map(i => startPage + i);
return {
totalItems: totalItems,
currentPage: currentPage,
pageSize: pageSize,
totalPages: totalPages,
startPage: startPage,
endPage: endPage,
startIndex: startIndex,
endIndex: endIndex,
pages: pages
};
}
if (error) return "Error loading assessments";
if (loading) return <h1>Fetching</h1>;
if (data.assessments && data.assessments.length) {
const searchQuery = data.assessments.filter((query) => {
return Object.keys(query).some(key => query[key].toString().toLowerCase().includes(search))
});
const pageSize = 24;
const paging = getPager(searchQuery.length, page, pageSize);
const pageOfItems = (searchQuery.slice(paging.startIndex, paging.endIndex + 1));
return (
<div>
<input
type="text"
placeholder="Search"
onChange={(e) => setSearch(e.target.value)}
/>
<p></p>
<ul className="image-list">
{pageOfItems.map((res) => (
<li key={res.id} className="image-list__item">
<div className="image__flow thumbnail">
<img src={`${process.env.NEXT_PUBLIC_API_URL}${res.image.url}`} alt="assessment" />
<h4>{res.title}</h4>
<h4>Label</h4>
<h4>{res.label}</h4>
<h5>Assetcode</h5>
<h5>{res.item}</h5>
</div>
</li>
))}
</ul>
<nav aria-label="Page navigation example">
<ul className="pagination" style={{cursor: 'pointer'}}>
<li className={paging.currentPage == 1 ? "page-item disabled" : "page-item"}>
<a className="page-link" onClick={() => setPage(1)}>First</a>
</li>
<li className={paging.currentPage == 1 ? "page-item disabled" : "page-item"}>
<a className="page-link" onClick={() => setPage(paging.currentPage - 1)}>Prev</a>
</li>
{paging.pages.map((page, index) =>
<li key={index} className="page-item">
<a className="page-link" onClick={() => setPage(page)}>{page}</a>
</li>
)}
<li className={paging.currentPage == paging.totalPages ? "page-item disabled" : "page-item"}>
<a className="page-link" onClick={() => setPage(paging.currentPage + 1)}>Next</a>
</li>
<li className={paging.currentPage == paging.totalPages ? "page-item disabled" : "page-item"}>
<a className="page-link" onClick={() => setPage(paging.totalPages)}>Last</a>
</li>
</ul>
</nav>
</div>
);
}
}
export default AssessmentList;
const Pagination = (props) => {
return (<></>)
}