Saltar al contenido

Reaccionar Infinito desplazamiento tutorialAug, 19thIn este tutorial, vamos a aprender acerca de cómo poner en práctica …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo implementar desplazamiento infinito en reaccionar mediante el uso de reaccionar-infinita-scroll-componente.

¿Cuál es infinito desplazamiento

infinita de desplazamiento nos ayuda a cargar los datos de forma continua cuando el usuario se desplaza por la página.

Instalación reaccionar infinita de desplazamiento

Estamos instalando un nuevo paquete llamado reaccionar-infinita-scroll-componente que nos proporciona ainfinite componente de desplazamiento.

Ejecutar el siguiente comando en su terminal para instalar el paquete.

npm i react-infinite-scroll-component

Ejemplo

Este es un simple ejemplo del uso de reaccionar-infinito-scroll-componente.

import React from "react";
import InfiniteScroll from "react-infinite-scroll-component";import axios from "axios";
import "./styles.css";

class App extends React.Component {
state = {
breweries: [],
pageNumber: 1,
items: 15,
hasMore: true
};

componentDidMount() {
//initial request is sent
this.fetchData();
}

fetchData = () => {
axios
.get(
`https://api.openbrewerydb.org/breweries?page=${
this.state.pageNumber
}&per_page=${this.state.items}`
)
.then(res =>
this.setState({
//updating data
breweries: [...this.state.breweries, ...res.data],
//updating page numbers
pageNumber: this.state.pageNumber + 1
})
);
};

render() {
return (

Loading...

} >
{this.state.breweries.map(brewery => (

  • Name: {brewery.name}

))}

);
}
}

export default App;

En el código anterior, primero se importó componente InfiniteScroll del paquete que acaba de instalar.

Pasamos cuatro apoyos a componentes que son de longitud de datos, al lado, hasMore, y el cargador.

  • dataLength: Toma la longitud de datos actual.
  • siguiente: Se toma el método de obtener los datos e invoca este método cuando un usuario llega al final de una página.
  • hasMore: Toma el valor booleano.
  • cargador: Toma el control de giro de carga, que se representa en el momento de la solicitud de la API se encuentra todavía en proceso.