如何在无限滚动时正确添加加载程序？

Question

我尝试了多种方法来实现加载，同时在无限滚动期间获取更多数据，但没有任何效果，所以我删除了加载器；我这里的状态（使用 redux）命名为：loading 但无法正确编写加载逻辑。你能告诉我如何让它工作吗？在这里我将提供代码：

import React, {useEffect} from 'react';
import { Link } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import {setAllUsers, setLoading, setPage} from '../redux/actions/actions';
import User from './User';
import '../styles/AllUsersList.css';

const AllUsersList = () => {
    const allUsers = useSelector(state => state.setAllUsersReducer);
    const page = useSelector(state => state.setPageReducer);
    const loading = useSelector(state => state.setLoadingReducer);
    const dispatch = useDispatch();
  

    const fetchAllUsers = () => {
       fetch(`${url}/${page}/15`)
            .then(res => res.json())
            .then(data => {
                dispatch(setAllUsers(data.list));
            })
            .catch(err => console.log('Error message: ', err))
    }

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

    const handleScroll = () => {
        dispatch(setPage());
    }

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


    return (
        <div className="allUsersList">
            {
                allUsers ? (
                    allUsers.map((user, index) => (
                        <Link key={user.id} to={`/user/${user.id}`}>
                            <User name={user.name} lastName={user.lastName} prefix={user.prefix} title={user.title} img={user.imageUrl}/>
                        </Link>
                    ))
                ) : (
                    <div> Loading... </div>
                )
            }
        </div>
    )
}

export default AllUsersList;

Answer 1

您的状态 loading 将在您的函数 fetchAllUsers 数据中设置为 true，当承诺解决时，它会设置为 false。

这是一个关于如何操作的示例，您可以调整它以使用 redux 调度程序来更改加载状态。

const loading = useState(false);

...

const fetchAllUsers = () => {
       setLoading(true);
       fetch(`${url}/${page}/15`)
            .then(res => res.json())
            .then(data => {
                dispatch(setAllUsers(data.list));
            })
            .catch(err => console.log('Error message: ', err))
            .finally(() => {
                setLoading(false);
             })
    }

...

{
                !loading ? (
                    allUsers.map((user, index) => (
                        <Link key={user.id} to={`/user/${user.id}`}>
                            <User name={user.name} lastName={user.lastName} prefix={user.prefix} title={user.title} img={user.imageUrl}/>
                        </Link>
                    ))
                ) : (
                    <div> Loading... </div>
                )
            }

如何在无限滚动时正确添加加载程序？

How to add loader correctly while infinite scrolling?

javascript

reactjs

infinite-scroll