React JS 中的无限滚动，但来自 Reddit 的数据不断加载和加载

Question

please have a look at the code and suggest what should have had done.

import React, {useState, useEffect} from "react";
import logo from './logo.svg';
import './App.css';
import './Table.css';
import axios from "axios";

const NEXT_PAGE = "";
function App() {
const [items, setData] = useState([]);
const [page, setPage] = useState(NEXT_PAGE);
useEffect( () => {
    axios.get(`https://www.reddit.com/r/aww.json?after=${page}`)
    .then(res=> res.data)           
    .then(data => {
        setData([...items, ...data.data.children])
        setPage(data.data.after)
    })
}, [page]);

const scrollToEnd = () => {
    setPage(page);
}

window.onscroll = function(){
    if(
        window.innerHeight + document.documentElement.scrollTop
        === document.documentElement.offsetHeight
    ){
        scrollToEnd()
    }
}


return (
    <div className="App">
        <h1>Displaying data from Reddit API</h1>
        <table>
            <thead>
            <tr>
                <th>ID</th>
                <th>Photo</th>
                <th>Content</th>
            </tr>
            </thead>
            <tbody>
                {items.length > 0 && items.map((el, i) => 
                    <tr id={el.data.id}>
                        <td>{el.data.id}</td>
                        <td><img src={`${el.data.thumbnail}`} height={`${el.data.thumbnail_height}`} width={`${el.data.thumbnail_width}`} /></td>
                        <td>{el.data.title}</td>
                    </tr>
                )}
            </tbody>
        </table>
    </div>
);      
}

export default App;

Either it keeps loading data or does not do anything once we reach at the bottom of the page. I only want the next course of data to be loaded when we reach at the bottom of the page. I am trying to learn from various sources but as I am just starting it, I am unable to do it properly. Your valuable suggestion will help me learn things in a proper way.

Answer 1

you are actually nevering calling the scrollToEnd() function, because you rarely get the strict equality, it will be either below or above but not strictly equal

give it a try with :

window.innerHeight + document.documentElement.scrollTop
        > document.documentElement.offsetHeight

also in your useEffet function you could use a cleanup function to avoid memory leaks, and also add a catch to deal with errors :

useEffect( () => {
    let mounted = true

    if(mounted)
      axios.get(`https://www.reddit.com/r/aww.json?after=${page}`)
      .then(res=> res.data)           
      .then(data => {
          setData([...items, ...data.data.children])
          setPage(data.data.after)
      .catch(err => console.error (err))
      })

    return () => mounted = false;
}, [page]);

Also to avoid the infinite refetching of the data, try removing the setPage inside of your async function inside the useEffect hook

const NEXT_PAGE = 0;
function App() {
const [items, setData] = useState([]);
const [page, setPage] = useState(NEXT_PAGE);

useEffect( () => {
    let mounted = true

    if(mounted)
      axios.get(`https://www.reddit.com/r/aww.json?after=${page}`)
      .then(res=> res.data)           
      .then(data => {
          setData([...items, ...data.data.children])
      .catch(err => console.error (err))
      })

    return () => mounted = false;
}, [page]);

const scrollToEnd = () => {
    setPage(prevPage => prevPage + 1);
}

window.onscroll = function(){
    if(
        window.innerHeight + document.documentElement.scrollTop
        > document.documentElement.offsetHeight
    ){
        scrollToEnd()
    }
}