ReactJS 分页 React Hooks

Question

大家好，我有 react 和 node 的 curd，我想添加分页，现在显示所有卡片 Non-stop

现在这个代码

<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;

这个教程我尝试学习https://www.youtube.com/watch?v=HANSMtDy508 我很乐意寻求帮助或信息来源来帮助我

Answer 1

查看这个简单的分页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></>
  )
};