Probé varias formas de implementar la carga mientras obtenía más datos durante el desplazamiento infinito, pero nada funcionó correctamente, así que eliminé el cargador; Tengo aquí el estado (con redux) llamado: cargando pero no puedo escribir la lógica de carga correctamente. ¿Podría por favor decirme cómo puedo hacer que funcione? Aquí voy a proporcionar con el código:
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;Su loading de estado se establecería en true en su función fetchAllUsers the data y cuando la promesa se resuelva, se establecerá en false .
Aquí hay un ejemplo de cómo lo haría, puede adaptarlo para usar un despachador redux para cambiar el estado de carga.
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> ) }