reactjs - ReactJS 分页 React Hooks
问题描述
大家好,我有反应和节点的凝乳,我想添加分页,现在显示所有卡片不间断
现在这段代码
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from 'react';
import { Grid, CircularProgress } from '@material-ui/core';
import { useSelector } from 'react-redux';
import Post from './Post/Post';
import useStyles from './styles';
const Posts = ({ setCurrentId }) => {
const posts = useSelector((state) => state.posts);
const classes = useStyles();
return (
!posts.length ? <CircularProgress /> : (
<Grid className={classes.container} container alignItems="stretch" spacing={3}>
{posts.map((post) => (
<Grid key={post._id} item xs={12} sm={6} md={6}>
<Post post={post} setCurrentId={setCurrentId} />
</Grid>
))}
</Grid>
)
);
};
export default Posts;
这个代码我试试
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from 'react';
import { Grid, CircularProgress } from '@material-ui/core';
import { useSelector } from 'react-redux';
import Post from './Post/Post';
import useStyles from './styles';
const Posts = ({ setCurrentId }) => {
const posts = useSelector((state) => state.posts);
const classes = useStyles();
const [pageNumber, setPageNumber] = useState(0);
const usersPerPage = 10;
const pagesVisited = pageNumber * usersPerPage;
const displayUsers = users
return (
!posts.length ? <CircularProgress /> : (
<Grid className={classes.container} container alignItems="stretch" spacing={3}>
.slice(pagesVisited, pagesVisited + usersPerPage)
post.map((user) => {
<Grid key={post._id} item xs={12} sm={6} md={6}>
<Post post={post} setCurrentId={setCurrentId} />
</Grid>
}
</Grid>
)
);
};
export default Posts;
解决方案
请参阅这个简单的 javascript 示例进行分页
var ary = [0,1,2,3,4,5,6,7,10,11,12];
var page = 3
var limit = 3
var startIndex = (page-1)*limit
console.log(ary.slice(startIndex,limit))
//Your pagecount will be
var Numberofpage = Math.floor((ary.length+limit -1)/limit)
console.log(Numberofpage)
在你的情况下
const Posts = ({ setCurrentId }) => {
const posts = useSelector((state) => state.posts);
const classes = useStyles();
const [pageNumber, setPageNumber] = useState(1);
const [buttonnext, setbuttonnext] = useState(false);
const [prebutton, setprebutton] = useState(true);
const PostsPerPage = 10;
const limit=8;
const [startIndex,setstartIndex] = useState();
const [endIndex,setendIndex] = useState();
useEffect(()=>{
setstartIndex((pageNumber-1)*limit)
setendIndex(pageNumber*limit)
console.log(startIndex)
console.log(endIndex)
},[posts,pageNumber])
const Next = ()=>{
if(pageNumber === (Math.floor((posts.length+limit -1)/limit))){
setbuttonnext(true)
}else{
setPageNumber(pageNumber+1)
setprebutton(false)
}
}
const Previous = () =>{
if(pageNumber == 1){
setprebutton(true)
}else{
setPageNumber(pageNumber-1)
setbuttonnext(false)
}
}
return(
!posts.length ? <CircularProgress /> : <>
<Grid className={classes.container} container alignItems="stretch" spacing={3}>
{posts.slice(startIndex,endIndex).map((post) => {
return( <Grid key={post._id} item xs={12} sm={6} md={6}>
<Post post={post} setCurrentId={setCurrentId} />
</Grid>)
})}
<><button disabled={prebutton} onClick={Previous}>Previous</button>
<p>{ pageNumber}</p>
<button disabled={buttonnext} onClick={Next}>Next</button>
</>
</Grid></>
)
};
推荐阅读
- javascript - 数据表动态更新总计
- sql - 用另一个表中的某些列创建一个表
- encryption - 在 C# 中使用 Google KMS API 加密的值长度与在 postman 中直接从 API 生成的加密文本的长度不同
- vue.js - 在 v-autocomplete 上使用附加时,Vuetify 无法定位目标
- python - 我正在尝试打印带有各自分数的字符串
- angular - 如何在组件中使用服务?
- python - 如何在 matplotlib plocontourf 图上使用两个 y 轴,例如对数压力和高度
- c# - 使用模拟器进行测试 - 从发布目录运行时无法获得机器人的响应
- reactjs - 我想构建自己的 React UI 库,我该如何开始?
- c# - 如何为列分配真值或假值