Paginación de posts mediante scroll infinito

Clase 30 de 58 • Curso Profesional de React con Redux 2016

Contenido del curso

Bienvenido al curso

Fundamentos

Creación del proyecto

Implementación de Redux

Desafíos

Contenido bonus

Tomar examen

Resumen

Scroll infinito al cargar los posts

Comentarios

Jose Alvarez Alvarez

student•

No se si arregle mas adelante, pero no se si hice algo mal, pero en mi caso siguio cargando aumentado uno al page.

Diego Forero

Team Platzi•

Yo lo solucione cambiando

const fullHeight = document.body.clientHeight;

por

const fullHeight = document.documentElement.clientHeight;

Carlos Andrés Millan Satizabal

student•

Mucha gracias. Yo tenía ese problema y al hacer la corrección quedó super. Gracias por el aporte.

David Camacho

student•

document.body : Al devolver, esta propiedad devuelve el elemento <body> del documento actual.

document.documentElement : Devuelve el elemento <html>

Bryam Rodriguez

student•

Para qué se hace el bind de la función handleScroll?

Sergio Daniel Xalambrí

student•

Para poder usar this.setState dentro de esa función.

Volvé a repasar como manejar eventos del DOM y el de creación de componentes donde se explica sobre para que usar .bind en los event handlers.

Juan Luis Rojas León

student•

¿Porqué no se utilizó el evento onScroll de React?

Sergio Daniel Xalambrí

student•

Ese evento escucha el scroll del elemento al que se lo colocas, por ejemplo:

<div onScroll={this.handleScroll} />

Eso solo escucha el scroll del <div />. Pero nosotros necesitamos escuchar el scroll de todo el body. Y este body no lo renderizamos con React (en el navegador).

Juan Carlos Correa Herrera

student•

Si en this.state tengo un valor que es un objeto y una propiedad de ese objeto es el array que contiene el conjunto de objetos a renderizar, ¿Cómo actualizo solamente esa propiedad en setState?

Ejemplo:

// en constructor
 this.state = {
     posts: {}
    };

// en componentDidMount()

posts = {
  success: true,
  results: [
      {id: 1, content: 'Lorem Ipsum ...'},
      {id: 1, content: 'Lorem Ipsum ...'},
      // N objetos...
    ]
}

this.setState({
  posts,
})

// en handleScroll
posts = {
  success: true,
  results: [
      {id: 1, content: 'Lorem Ipsum ...'},
      {id: 1, content: 'Lorem Ipsum ...'},
      // N objetos...
    ]
}

// aquí es mi duda...
this.setState({
  // da error ya que el array esta en posts.result
  posts: this.state.posts.concat(posts),
})

Pero si lo hago así:

this.setState({
  posts: this.state.posts.result.concat(posts.result),
})

Me convierte a posts en un array, es decir, deja de ser un objeto con las propiedades success y results y se convierte en un array que contiene únicamente results, por lo que a la siguiente llamda de handleScroll va a dar error porque ya no es this.posts.result, ahora es sólo this.posts. Result ya no existe, lo reemplaza por todo el array.

También me da error en el render puesto que me baso en la propiedad success para renderizar el componente, y como después del handleScroll deja de existir success, ya no me renderiza.

¿Cómo puedo hacerle en este caso? 😮

Juan Carlos Correa Herrera

student•

Por cierto, estoy consumiendo otra api que me regresa todas las respuestas con la estructura antes dicha, es diferente a la del curso.

Sergio Daniel Xalambrí

student•

Tenés que actualizar todo el objeto posts modificando solo una propiedad.

this.setState({
	posts: {
		...this.state.posts,
		results: this.state.posts.concat(post.result),
	},
});

Lo mejor es que traten de mantener tu estado lo más plano posible y evitar tener muchos objetos anidados.

Fran Delgado

student•

No se si le pasara a mas gente, pero a mi la linea:

componentWillMount() {
   window.removeEventListener('scroll', this.handleScroll);
}

me daba un error y no me dejaba arrancar el proyecto. Lo he solucionado controlando el valor del windows dentro de componentWillMount:

componentWillMount() {
    if(typeof window !== 'undefined') {
      window.removeEventListener('scroll', this.handleScroll);
    }
  }

Sergio Daniel Xalambrí

student•

Hola, el error es porque usaste el método componentWillMount en vez de usar componentWillUnmount que es el correcto. La razón del error es que componentWillMount se ejecuta en el servidor y por eso no existe window.

Otra cosa es que poner esa línea en componentWillMount no hace absolutamente nada ya que nuestro objetivo es eliminar el listener del scroll cuando el componente se desmonta, lo estás quitando antes de que el componente se monte y antes de que se asigne el listener.

Fran Delgado

student•

Pues muchas gracias Sergio, una vez mas, por tu ayuda.

Raul Garcia De la Fuente Garci Garcia De la Fuente

student•

si quereis que haga scroll al llegar al final

const scrolled = document.body.scrollTop;
const strollwidth = document.body.scrollWidth
const scrollHeight = document.body.scrollHeight;


if(!(scrolled +strollwidth >= scrollHeight)){
  return null;
}

Raul Garcia De la Fuente Garci Garcia De la Fuente

student•

ademas si controlaremos el length del post devuelto podríamos añadir al state un valor que indicara que no quedan mas por cargar

Jorge Méndez Ortega

student•

esto podria se mar facil si solo se hace esto

let scroll   = document.body.scrollHeight - window.innerHeight;
let mvScroll = window.scrollY; 

  if (mvScroll === scroll){
   //ejecutar sentencia
}

Abraham Solorzano

student•

Hola que tal…

Tengo un error al momento de llegar al final del body de mi page, cuando debería hacer la promise este me devuelve un error que lo adjunto a continuación:

Respuesta del navegador

app.js:353 Warning: flattenChildren(...): Encountered two children with the same key, `1:$98`. Child keys must be unique; when two children share a key, only the first child will be used.
    in section (created by Home)
    in section (created by Home)
    in Home (created by Route)
    in Route (created by Pages)
    in Switch (created by Pages)
    in main (created by Pages)
    in Pages
    in Router (created by BrowserRouter)
    in BrowserRouter

Home.jsx

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

import Post from '../../posts/containers/Post.jsx';
import Loading from '../../shared/components/Loading.jsx';

import api from '../../api.js';

class Home extends Component {
  constructor(props){
    super(props);

    this.state = {
      page: 1,
      posts: [],
      loading: true,
    };

    this.handleScroll = this.handleScroll.bind(this);
  }

  async componentDidMount() {
    const posts = await api.posts.getList(this.state.page);

    this.setState({
      posts,
      page: this.state.page + 1,
      loading: false,
    })

    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount(){
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll(event) {
    if(this.state.loading) return null;

    const scrolled = window.scrollY;
    const viewportHeight = window.innerHeight;
    const fullHeight = document.documentElement.clientHeight

    if(!(scrolled + viewportHeight + 300 >= fullHeight)) {
      return null
    }

    this.setState({loading: true}, async () => {
      try {
        const posts = await api.posts.getList(this.state.page);

        this.setState({
          posts: this.state.posts.concat(posts),
          page: this.state.page + 1,
          loading: false,
        })
      } catch (error){
        console.error(error);
        this.setState({loading: false});
      }
    })
  }
  render() {
    return (
      <section name="Home">
        <h1>Home</h1>
        <section>
          {this.state.loading && (
            <Loading />
          )}
          {this.state.posts
            .map(post => <Post key={post.id} {...post} />)}
        </section>
      </section>
    );
  }
}

export default Home;

Abraham Solorzano

student•

Aún sin poder ver el error, estuve revisando el service y no se esta duplicando pero claramente cae en un loop infinito.

Help me! @sergiodxa

// en componentDidMount()

posts = {
  success: true,
  results: [
      {id: 1, content: 'Lorem Ipsum ...'},
      {id: 1, content: 'Lorem Ipsum ...'},
      // N objetos...
    ]
}

this.setState({
  posts,
})

// en handleScroll
posts = {
  success: true,
  results: [
      {id: 1, content: 'Lorem Ipsum ...'},
      {id: 1, content: 'Lorem Ipsum ...'},
      // N objetos...
    ]
}

// aquí es mi duda...
this.setState({
  // da error ya que el array esta en posts.result
  posts: this.state.posts.concat(posts),
})

const scrolled = document.body.scrollTop;
const strollwidth = document.body.scrollWidth
const scrollHeight = document.body.scrollHeight;


if(!(scrolled +strollwidth >= scrollHeight)){
  return null;
}

app.js:353 Warning: flattenChildren(...): Encountered two children with the same key, `1:$98`. Child keys must be unique; when two children share a key, only the first child will be used.
    in section (created by Home)
    in section (created by Home)
    in Home (created by Route)
    in Route (created by Pages)
    in Switch (created by Pages)
    in main (created by Pages)
    in Pages
    in Router (created by BrowserRouter)
    in BrowserRouter

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

import Post from '../../posts/containers/Post.jsx';
import Loading from '../../shared/components/Loading.jsx';

import api from '../../api.js';

class Home extends Component {
  constructor(props){
    super(props);

    this.state = {
      page: 1,
      posts: [],
      loading: true,
    };

    this.handleScroll = this.handleScroll.bind(this);
  }

  async componentDidMount() {
    const posts = await api.posts.getList(this.state.page);

    this.setState({
      posts,
      page: this.state.page + 1,
      loading: false,
    })

    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount(){
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll(event) {
    if(this.state.loading) return null;

    const scrolled = window.scrollY;
    const viewportHeight = window.innerHeight;
    const fullHeight = document.documentElement.clientHeight

    if(!(scrolled + viewportHeight + 300 >= fullHeight)) {
      return null
    }

    this.setState({loading: true}, async () => {
      try {
        const posts = await api.posts.getList(this.state.page);

        this.setState({
          posts: this.state.posts.concat(posts),
          page: this.state.page + 1,
          loading: false,
        })
      } catch (error){
        console.error(error);
        this.setState({loading: false});
      }
    })
  }
  render() {
    return (
      <section name="Home">
        <h1>Home</h1>
        <section>
          {this.state.loading && (
            <Loading />
          )}
          {this.state.posts
            .map(post => <Post key={post.id} {...post} />)}
        </section>
      </section>
    );
  }
}

export default Home;

Paginación de posts mediante scroll infinito

Bienvenido al curso

Actualizaremos este curso pronto

Bienvenido al curso de React

Fundamentos

¿Qué es React?

Hola Mundo con React

¿Qué es y cómo funciona el Virtual DOM?

Introducción a JSX

Creación de componentes

Componentes Puros vs de Estado

Ciclo de vida de un componente

Ciclo de vida de componentes

Manejo de eventos del DOM

Event handlers con parámetros personalizados

Contexto de la aplicación

Componentes de Alto Orden (HOC) y Mixins

Creación del proyecto

Presentación del proyecto

Instalación de Node.js y usando npm

Estructura de archivos

Iniciar un servidor de render básico - Render en Server

Module bundlers en JavaScript

Configurar Webpack para el servidor de render

Crear una app con React y React Router

Manejo de rutas en el servidor con React Router

Crear cliente para consumir el API

Iniciar la app en el navegador y configurar Webpack para producción

Iniciar un servidor de estáticos con zeit/list

Herramientas de desarrollo de React

Consumir el API y mostrar datos en la home

Perfil de usuarios

Estado de cargando y detalle de post