Perfil de usuarios

Clase 28 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

Vamos a crear la página para el perfil del usuario y cargando los posts que el ha escrito.

Comentarios

Carlos Pérez

student•

Si en lugar de mandar

!this.state.user ? api.users.getSingle(this.props.userId) : Promise.resolve(null)

Hacemos esto

!this.state.user ? api.users.getSingle(this.props.userId) : Promise.resolve(this.state.user),

Evitariamos tener que hacer esta validacion

user: user || this.state.user

Y creo que finalmente complicaria menos el codigo. La pregunta es: Es optimo hacer eso?

Sergio Daniel Xalambrí

student•

Interesante propuesta 🤔 La respuesta a si es óptimo siempre se resuelve de una forma, probando, podés colocar un console.time antes de hacer la petición y un console.timeEnd luego de que se actualice el componente (debido al cambio de estado) y probar ambos casos y si afecta en algo.

Mi teoría es que la diferencia va a ser de unos pocos mili segundos haciendo que de igual cual uses y sea más cuestión de estética del código y de que tan fácil hace mantenerlo luego.

Carlos Pérez

student•

Lo mismo pasará mas adelante cuando se intente hacer con “comments”. Creo que queda mas entendible de esta forma.

Me queda pendiente hacer la prueba que dices y estaré avisando

William Reaño Reyes

student•

para los que e sale el id undefined o null,
capturenlo de esta manera

Carlos Andrés Millan Satizabal

student•

Cuando termina este video, despues de hacer las correcciones para que no traiga varias veces los datos del user, al refrescar el browser me sale este error en la consola:

Uncaught (in promise) TypeError: Cannot read property ‘id’ of null
at Post.render (app.js:25580)
at app.js:15770
at measureLifeCyclePerf (app.js:15049)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (app.js:15769)
at ReactCompositeComponentWrapper._renderValidatedComponent (app.js:15796)
at ReactCompositeComponentWrapper.performInitialMount (app.js:15336)
at ReactCompositeComponentWrapper.mountComponent (app.js:15232)
at Object.mountComponent (app.js:7802)
at Object.updateChildren (app.js:14813)
at ReactDOMComponent._reconcilerUpdateChildren (app.js:14342)

NOTA: Copié todo el contenido de los archivos Profile.jsx y Post.jsx que vienen el el archivo comprimido de este video y me sale lo mismo.

Juan Carlos Correa Herrera

student•

¿Lograste solucionarlo? me da el mismo error D:

Carlos Andrés Millan Satizabal

student•

No, aún no he podido. Me quedé estancado aquí.

Jorge Méndez Ortega

student•

Para conseguir el id pasado por paratemtro en el constructor de profile genere esto

this.id     = props.match.params.id;

De esa maneta puedo tener acceso al id del usuario, espero les funcione.

Sergio Daniel Xalambrí

student•

Esa es una buena forma de ahorrar código, pero hay un problema, ¿qué pasa si el id cambia sin desmontar el componente? Si por ejemplo del perfil de un usuario navegan a otro perfil entonces el id va a cambiar, pero como es todavía la misma página React no va a desmontar el componente.

En estos casos necesitas usar el método del ciclo de vida componentWillReceiveProps y actualizar el calor de this.id. Otra opción es crear un getter que te de el valor de ese prop pero que lo uses como this.id y de esa forma el valor ser computa siempre aunque el prop se actualice.

Juan Carlos Correa Herrera

student•

A la hora de querer ver los datos del usuario me está dando error.

“Uncaught (in promise) TypeError: Cannot read property ‘id’ of undefined”

La ubicación del error es aquí:

async componentDidMount() {
    const [
      user,
      posts,
    ] = await Promise.all([
      api.users.getSingle(this.props.params.id),
      api.users.getPosts(this.props.params.id)
    ]);

    this.setState({
      user,
      posts,
      loading: false,
    });
  }

A lo que entiendo, lo está considerando como nulo. Ya revisé el código que está en pestaña de archivos y está igual, alguna idea? D;

Juan Carlos Correa Herrera

student•

De hecho, en Profile.jsx hago un console.log(this.props.params) antes del return del render y me marca como null. ¿Qué estoy haciendo mal? llevo casi dos horas en esto :'v

Juan Carlos Correa Herrera

student•

Si alguien podría decirme qué estoy haciendo mal, se lo agradeceré. Pongo el código:

Profile.jsx

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

import Post from '../../posts/containers/Post.jsx'

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

class Profile extends Component {
  constructor(props){
    super(props)

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

  async componentDidMount() {
    const [
      user,
      posts,
    ] = await Promise.all([
      api.users.getSingle(this.props.params.id),
      api.users.getPosts(this.props.params.id),
    ]);

    this.setState({
      user,
      posts,
      loading: false,
    });
  }
  render() {
    return (
      <section name="Profile">
        <h2>profile of {this.state.user.name}</h2>

        <fieldset>
          <legend>Basic Info</legend>
          <input type="email" value={this.state.user.email} disabled />
        </fieldset>

          {this.state.user.address && (
            <fieldset>
              <legend>Address</legend>
              <address>
                {this.state.user.address.street}  <br/>
                {this.state.user.address.suite}  <br/>
                {this.state.user.address.city}  <br/>
                {this.state.user.address.zipcode}  <br/>
              </address>
            </fieldset>
          )}

          <section>
            {this.state.posts
              .map(post => (
                <Post
                  key={post.id}
                  user={this.state.user}
                  {...post}
                />
              ))
            }
          </section>

      </section>
    );
  }
}

export default Profile;

Post.jsx

import React, { Component, PropTypes } from 'react'
import api from '../../api.js'
import { Link } from 'react-router-dom'

class Post extends Component {
  constructor(props) {
    super(props)

    this.state = {
      loading: true,
      user: props.user || null,
      coments: [],
    }
  }

  async componentDidMount() {
    const [
      user,
      comments,
    ] = await Promise.all([
      !this.state.user ? api.users.getSingle(this.props.userId) : Promise.resolve(null),
      api.posts.getComments(this.props.id),
    ]);

    this.setState({
      loading: false,
      user: user || this.state.user,
      comments,
    })
  }

  render() {
    return (
      <article>
        <h2>{this.props.title}</h2>
        <p>
          {this.props.body}
        </p>
        {!this.state.loading && (
          <div>
            <Link to={`/user/${this.state.user.id}`}>
              {this.state.user.name}
            </Link>
            <span>
              Hay {this.state.comments.length} comentarios
            </span>
          </div>
        )}
      </article>
    )
  }
}

Post.PropTypes = {
  id: PropTypes.number,
  userId: PropTypes.number,
  title: PropTypes.string,
  body: PropTypes.string,
}

export default Post

api.js, parte de users

users: {
      async getSingle(id = 1) {
        const response = await fetch(`${baseUrl}/users/${id}`);
        const data = await response.json();
        return data;
      },
      async getPosts(id = 1){
        const response = await fetch(`${baseUrl}/posts/?userId=${id}`);
        const data = await response.json();
        return data;
      }
    },

Ya no sé qué más hacer D:

Miguel Rivas

student•

tengo el siguiente error en consola:

Uncaught Error: Cannot find module** “./Profile.jsx”**
at webpackMissingModule (app.js:25411)
at Object.<anonymous> (app.js:25411)
at webpack_require (app.js:20)
at Object.<anonymous> (app.js:57)
at webpack_require (app.js:20)
at app.js:40
at app.js:43

y no pasa de Loading posts…, revise los comentarios anteriores y corregi el !this.state.loading en el Post.jsx, puede ser que no se este actualizando el app.js ??

Sergio Daniel Xalambrí

student•

Fijate que el nombre del archivo este bien, que la ruta del import esté bien, que no haya ningún error, también podés probar parar webpack y volverlo a iniciar para ver si es un problema de que no lea los cambios (aunque dudo que sea esto).

Si nada de esto funciona subí a Github los archivos que tenés hasta este punto para que los pueda revisar.

Miguel Rivas

student•

si, tenia un type…, lo que pasa es que me carga muy despacio tb el app.js… solucionado en cualquier caso, gracias.

Juan Carlos Correa Herrera

student•

Necesito ayuda con esta vaina porque estoy atorado desde hace dos días.

Primero en Profile.jsx, en componentDidMount, me daba como undefined , incluso this.props.params.

Hice un console.log de this.props y vi que params estaba dentro de “match”, entonces lo modifiqué así:

y así ya me daba el valor del id.

Pero ahora me da este error: “Uncaught (in promise) ReferenceError: loading is not defined”

Y es en el método setState, para cambiar “loading” a false. En constructor del componente sí lo defino:

this.state = {
      user: {},
      posts: [],
      loading: true,
    }

Entonces, ¿Por qué rayos me dice que no está definido? ¿Es correcto obtener el id con ?

La verdad me está gustando este curso y quiero avanzar pero estos errores no me lo permiten D: D: D:

Juan Carlos Correa Herrera

student•

Es raro que incluso con el mismo código que está en Archivos me marque el error de this.props.params. ¿Qué estoy haciendo mal? D:

Juan Carlos Correa Herrera

student•

Ya pude hacerlo. Vi que en el artículo para actualizar este proyecto ya se menciona lo de acceder a params con match (del objeto props) y mi error de código era que hacía el set.state colocando un array en lugar de un objeto (usaba [] en lugar de {}). Ahora si me corre bien :’)

Bryam Rodriguez

student•

Realicé los cambios de este video y me funciona bien dentro de un post, pero cuando voy a la Home. Me sale un error

Uncaught (in promise) TypeError: Cannot read property 'id' of null

Creo que se debe a que el user es null cuando se hace render y aun no se ha hecho la petición

Sergio Daniel Xalambrí

student•

Revisa el comentario de @EdwinDeLeonG más abajo, tuvo el mismo problema y ahí está la solución.

Bryam Rodriguez

student•

Gracias, el problema era que estaba usando this.props.loading en lugar de this.state.loading entonces

EdwinDeLeonG

student•

Si estoy en me carga todo bien, pero cuando estoy en no me cargan los post y aparece esto:
Uncaught (in promise) TypeError: Cannot read property ‘id’ of null
at Post.render (app.js:25600)
at app.js:15776
at measureLifeCyclePerf (app.js:15055)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (app.js:15775)
at ReactCompositeComponentWrapper._renderValidatedComponent (app.js:15802)
at ReactCompositeComponentWrapper.performInitialMount (app.js:15342)
at ReactCompositeComponentWrapper.mountComponent (app.js:15238)
at Object.mountComponent (app.js:7808)
at Object.updateChildren (app.js:14819)
at ReactDOMComponent._reconcilerUpdateChildren (app.js:14348)

Sergio Daniel Xalambrí

student•

Revisa que tengas el código tal cual (podés verlo en la pestaña de archivos).
En el método render antes del return hace un console.log de this.props y fijate que te muestra, parecería por el error que es igual a null.
Si no encontras diferencias entre los archivos del curso y los que hiciste y el console.log te muestra bien los datos de cada post subí tus archivos a Github para poder revisarlos.

EdwinDeLeonG

student•

He comparado mi código con los archivos y estan iguales
El console.log me arroja esto Object {params: Object, isExact: true, pathname: “/”, location: Object, pattern: “/”}
Descargue los archivos del curso y los corri y me da exactamente el mismo error que a mi código en , e igual que mi código, cuando entro en si me corre.
Mi repo es pero como le escribí mas arriba, el código del curso me da exactamente el mismo error.

async componentDidMount() {
    const [
      user,
      posts,
    ] = await Promise.all([
      api.users.getSingle(this.props.params.id),
      api.users.getPosts(this.props.params.id)
    ]);

    this.setState({
      user,
      posts,
      loading: false,
    });
  }

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

import Post from '../../posts/containers/Post.jsx'

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

class Profile extends Component {
  constructor(props){
    super(props)

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

  async componentDidMount() {
    const [
      user,
      posts,
    ] = await Promise.all([
      api.users.getSingle(this.props.params.id),
      api.users.getPosts(this.props.params.id),
    ]);

    this.setState({
      user,
      posts,
      loading: false,
    });
  }
  render() {
    return (
      <section name="Profile">
        <h2>profile of {this.state.user.name}</h2>

        <fieldset>
          <legend>Basic Info</legend>
          <input type="email" value={this.state.user.email} disabled />
        </fieldset>

          {this.state.user.address && (
            <fieldset>
              <legend>Address</legend>
              <address>
                {this.state.user.address.street}  <br/>
                {this.state.user.address.suite}  <br/>
                {this.state.user.address.city}  <br/>
                {this.state.user.address.zipcode}  <br/>
              </address>
            </fieldset>
          )}

          <section>
            {this.state.posts
              .map(post => (
                <Post
                  key={post.id}
                  user={this.state.user}
                  {...post}
                />
              ))
            }
          </section>

      </section>
    );
  }
}

export default Profile;

import React, { Component, PropTypes } from 'react'
import api from '../../api.js'
import { Link } from 'react-router-dom'

class Post extends Component {
  constructor(props) {
    super(props)

    this.state = {
      loading: true,
      user: props.user || null,
      coments: [],
    }
  }

  async componentDidMount() {
    const [
      user,
      comments,
    ] = await Promise.all([
      !this.state.user ? api.users.getSingle(this.props.userId) : Promise.resolve(null),
      api.posts.getComments(this.props.id),
    ]);

    this.setState({
      loading: false,
      user: user || this.state.user,
      comments,
    })
  }

  render() {
    return (
      <article>
        <h2>{this.props.title}</h2>
        <p>
          {this.props.body}
        </p>
        {!this.state.loading && (
          <div>
            <Link to={`/user/${this.state.user.id}`}>
              {this.state.user.name}
            </Link>
            <span>
              Hay {this.state.comments.length} comentarios
            </span>
          </div>
        )}
      </article>
    )
  }
}

Post.PropTypes = {
  id: PropTypes.number,
  userId: PropTypes.number,
  title: PropTypes.string,
  body: PropTypes.string,
}

export default Post

users: {
      async getSingle(id = 1) {
        const response = await fetch(`${baseUrl}/users/${id}`);
        const data = await response.json();
        return data;
      },
      async getPosts(id = 1){
        const response = await fetch(`${baseUrl}/posts/?userId=${id}`);
        const data = await response.json();
        return data;
      }
    },

Perfil de usuarios

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