useInfiniteScroll 不触发 onLoadMore

Question

我在下面的功能组件中使用依赖项 react-infinite-scroll-hook，我确实从 PokéAPI 检索数据。但是，数据仅在useEffect中第一次调用函数loadData时加载，但滚动到sentryRef的组件不会触发useInfiniteScroll中的onLoadMore ].我在这里缺少什么？

import React, { useState, useEffect } from 'react';
import { Grid, CircularProgress, capitalize, List, ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
import useInfiniteScroll from 'react-infinite-scroll-hook';
import axios from 'axios';
import { Lens } from '@material-ui/icons';

function NationalPokedex(props) {
    const [pokemons, setPokemons] = useState([]);
    const [loading, setLoading] = useState(false);
    const [hasNext, setHasNext] = useState(true);
    const [next, setNext] = useState('https://pokeapi.co/api/v2/pokemon/');

    const loadData = () => {
        setLoading(true);
        console.log("FETCH")
        axios.get(next).then(response => {
            setPokemons([...pokemons, ...response.data.results]);
            if(response.data.next) {
                setNext(response.data.next);
            } else {
                setHasNext(false);
                setNext(null);
            }
            setLoading(false);
        });  
    }

    const [sentryRef] = useInfiniteScroll({
        loading,
        hasNext,
        onLoadMore: loadData,
        disabled: !!hasNext,
        rootMargin: '0px 0px 100px 0px',
    });

    useEffect(loadData, []);

    const renderData = () => {
        var result = [];
        pokemons.map((pokemon) => {
            result.push(<ListItem key={pokemon.name}><ListItemIcon><Lens></Lens></ListItemIcon><ListItemText>{capitalize(pokemon.name)}</ListItemText></ListItem>);
        });
        console.log("LOAD_DATA");
        console.log(hasNext, next, loading, pokemons);
        return result;
    }

    return (
        <>
        <List spacing={3}>
            {renderData()}
        </List>
        {(hasNext || loading) && (
            <Grid container item xs={12} ref={sentryRef} justifyContent='center' key='progress'>
                <CircularProgress/>
            </Grid>
        )}
        </>
    );
}

Answer 1

我最终使用了另一个依赖项，react-infinite-scroller，它工作得很好，所以我想问题不在我这边。

代码如下所示，以防对某人有用：

import React, { useState } from 'react';
import { Grid, CircularProgress, capitalize, List, ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
import InfiniteScroll from 'react-infinite-scroller';
import axios from 'axios';
import { Lens } from '@material-ui/icons';

function NationalPokedex(props) {
    const [pokemons, setPokemons] = useState([]);
    const [hasNext, setHasNext] = useState(true);
    const [next, setNext] = useState('https://pokeapi.co/api/v2/pokemon/');

    const loadData = () => {
        axios.get(next).then(response => {
            setPokemons([...pokemons, ...response.data.results]);
            if(response.data.next) {
                setNext(response.data.next);
            } else {
                setHasNext(false);
                setNext(null);
            }
        });  
    }

    const renderData = () => {
        var result = [];
        pokemons.map((pokemon) => {
            result.push(<ListItem key={pokemon.name}><ListItemIcon><Lens></Lens></ListItemIcon><ListItemText>{capitalize(pokemon.name)}</ListItemText></ListItem>);
        });
        return result;
    }

    return (
        <InfiniteScroll
            pageStart={0}
            loadMore={loadData}
            hasMore={hasNext}
            loader={<Grid container item xs={12} justifyContent='center' key='progress'><CircularProgress/></Grid>}
            threshold={0}
        >
            <List>{renderData()}</List>           
        </InfiniteScroll>
    );
}

export default NationalPokedex;

useInfiniteScroll 不触发 onLoadMore

useInfiniteScroll not triggering onLoadMore

infinite-scroll

reactjs