Tengo un pequeño problema con "react-infinite-scroller". Estoy usando el siguiente código:
function RadioStations(props) { const [items, setItems] = useState(new Array()); const [hasMore, setHasMore] = useState(true); let { filter, fname } = useParams(); return ( <div style={{ height: "700px", overflow: "auto" }}> <InfiniteScroll pageStart={0} loadMore={() => { items.push(<div>Test</div>); console.log(items); setItems(items); setHasMore(false); }} hasMore={hasMore} loader={ <div className="loader" key={0}> Loading ... </div> } useWindow={false} > {items} </InfiniteScroll> </div> ); }
Como puedo ver, mi función loadMore
se activa, pero nunca consigo que aparezcan mis elementos y me pregunto por qué.
Cualquier ayuda sera bienvenida.
Gracias.
Editar : he simplificado el ejemplo.
Si usa el mapa, necesita devolver algo
Intenta agregar un retorno en esta línea:
let jsonItems = json.map((data) =>{ return <Station data={data} />});
Lo encontré. Necesito agregar un div dentro del pergamino infinito.
function RadioStations(props) { const [items, setItems] = useState(new Array()); const [hasMore, setHasMore] = useState(true); let { filter, fname } = useParams(); return ( <div style={{ height: "700px", overflow: "auto" }}> <InfiniteScroll pageStart={0} loadMore={() => { items.push(<div>Test</div>); console.log(items); setItems(items); setHasMore(false); }} hasMore={hasMore} loader={ <div className="loader" key={0}> Loading ... </div> } useWindow={false} > <div> {items} </div> </InfiniteScroll> </div> ); }