在REACT中通过API建立无限加载时，即使我向下滚动很多，控制台也没有更新页码。

Question

我有一个非常基本的问题，是不工作的.我正在建立无限scoller在reactJS和我已经写了一些代码由自己，但我卡住了，因为每当我滚动下来，在控制台的页码打印2和它没有得到更新，即使我滚动多次.有人能告诉我为什么我的控制台是不递增超过2和我如何能解决这个问题？

这里是我的代码：。

import React, {useState, useEffect} from 'react';
import axios from "axios";

const Lists = () => {
      const [page, setPage] = useState(1);
      const [manifestList, setManifestList] = useState([]);
      const [isFetching, setIsFetching] = useState(false);

      useEffect(() => {
        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
      }, []);

      // eslint-disable-next-line react-hooks/exhaustive-deps
      function getManifests(pageNo){
          axios.get("http://localhost:3002/posts", { params: { _page: pageNo, _limit:20 } }).then(res => {
                console.log("data...", res.data);
                setManifestList([...manifestList, ...res.data]);
                setIsFetching(false);
          });
      }

      useEffect(() => {
        getManifests(page);
      }, []);

      useEffect(() => {
        if (!isFetching){
          return;
        }
        getManifests(page);

      }, [isFetching]);

      function handleScroll() {
        if (
          window.innerHeight + document.documentElement.scrollTop !==
            document.documentElement.offsetHeight ||
          isFetching
        )
          return;
          console.log("bottom hit...");
          let pageN = page + 1;
          setPage(pageN);
          setIsFetching(true);
      }

  console.log("page Number..", page);  //here it prints first time 1 and all other time 2 only

  return (
    <div>Arjun and shiva best amigos third..fifth
      <ul className="list-group mb-2">
        {manifestList.map((listItem, i) => <li key={i} className="list-group-item"> {listItem.title}</li>)}
      </ul>

    </div>
  );
};

export default Lists;

Answer 1

这是个好问题。请看我的解决方案，它的最好的你得到。

import React, { useState, useEffect } from "react";


function Lists() {
  const [posts, setPosts] = useState([]);
  const [freshposts, setFreshposts] = useState([]);
  const [isFetching, setIsFetching] = useState(false);
  const [page, setPage] = useState(1);
  const limit = 7;

  const getPosts = async () => {
    // setIsFetching(true)
    console.log("api request called....");

    const response = await fetch(
      `https://jsonplaceholder.typicode.com/posts?_limit=${limit}&_page=${page}`
    );
    const data = await response.json();
    setFreshposts(data);
    setPosts([...posts, ...data]);
    setIsFetching(false);

  };

  function handleScroll() {
    if (
      window.innerHeight + document.documentElement.scrollTop !==
      document.documentElement.offsetHeight
    )
      return;
    setIsFetching(true);
  }

  function getMorePosts() {
    // setTimeout(() => {
      setPage(page + 1);
      getPosts();
    // }, 2000);
  }

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  useEffect(
    () => {
      getPosts();
    },[]);

  useEffect(() => {
    if (!isFetching) return;
    if(freshposts.length > 0){
        getMorePosts();
        console.log("CHECK RE RENDER...");

    }
  }, [isFetching]);

  return (
    <div className="App">
      {posts.map((post, index) => (
        <div key={index} className="post">
          <div className="number">{post.id}</div>
          <div className="post-info">
            <h2 className="post-title">{post.title}</h2>
            <p className="post-body">{post.body}</p>
          </div>
        </div>
      ))}
      {isFetching && freshposts.length > 0 && (
        <div className="spinner-border" role="status">
            <span className="sr-only">Loading...</span>
        </div>
      )}
    </div>
  );
 }

export default Lists;