Conectando la información de la API

Clase 25 de 29 • Curso Práctico de React JS 2019

Resumen

Recuerda que puedes hacer fetch a la siguiente URL para obtener una lista de videos temporal: http://localhost:3000/initalState.

Manuel Ojeda

student•

Hola Platzi, si a ustedes les da error en consola diciendo que no pueden usar map o length así: Cannot read property 'length' of undefined Una solución es añadiendo en la declaración de useState los valores de lso arrays que estamos esperando, por lo que el código quedaría:

const [videos, setVideos] = useState({ mylist: [], trends: [], originals: [] });

Espero les sea de ayuda, happy coding ✌

Manuel Ojeda

student•

Eso es porque JavaScript espera encontrar esos elementos, pero al no encontrarlos truena el código

Beatriz Pérez Santana

student•

Muchas gracias!! Con tu solución me funcionó :)

Pero alguien sabe por qué al profesor en el vídeo sí le funciona?

Agustin Zamar

student•

Para asegurarse de que las propiedades a las que intentan acceder esten definidas pueden usar el operador " ?. " para cada una de ellas.

videos.myList?.length
videos.trends?.map()
videos.originals?.map()

Roberto Villate Morales

student•

Me salvaste con esa aportación, muchas gracias!

Usuario anónimo

user•

Gracias por la aportación, pero tengo una duda, no entiendo por qué las propiedades no están definidas.

Un saludo!

Iván Darío Sánchez Jiménez

student•

Dos observaciones para tener encuenta los que tienen problemas de compilación:

Inicializar el estado como lo propone el compañero @AugdiAugus

const [videos, setVideos] = useState({ mylist: [], trends: [], originals: [] });

En lo personal me estaba tirando error el no uso de parentesis despues de los && de la validación, aquí la solución:

{videos.mylist.length > 0 && (
        <Categories title='My list'>
          <Carousel>
            <CarouselItem />
          </Carousel>
        </Categories>
      )}

Espero les sea de utilidad

Jesús Miguel Quinto Teran

student•

Excelente aporte.

Israel Urbina

student•

crack! magnifico estaba teniendo problemas con eso xD, no me detectaba el arreglo

gracias por la solucion.

diego andres guzman

student•

El problema de .length y .map es que en que cuando se carga de la pagina vídeos esta vació, ya que se al cansa a ejecutar el llamado a length o a map antes de que tome los valores de la petición, pues javaScript no encuentra ni el map ni el length relacionado al objeto y arroja el error aparir de ahi ya no se ejecuta mas .

Para solucionar esto veo dos formas:

condicionar el llamado de leng o map, para que solo se ejecuten cuando exista un valor en el elemento de videos , por ejemplo videos.mylist:

 if(videos.mylist!==undefined){
        console.log(videos.mylist.length)
    }

o inicializar videos ya con arrays vacios en sus elementos

const [ videos , setVideos]=useState({
        mylist:[],
        trends: [],
        originals: []
    })

Considero mejor la segunda alternativa ya que es la estructura que tienen los datos que recibiremos, ademas haciéndolo de la primera manera tendría que hacer varias validaciones por cada elemento de videos

Carlos Vallejo

student•

Muchas gracias!

Sylvester Josué Rojas Cañón

student•

Te agradezco :)

Daniel Lopez

student•

por si sale el error de map undefined, tener en cuenta que primero se carga el html y despues el ts, por esto es necesario

 return videos.length === 0 ? &lt;h1&gt;Loading...&lt;/h1&gt; : (TU CODIGO)

esto garantiza que cuando se vayan a utilizar los datos existan,

y para corregir el error de length

videos.mylist?.length &gt; 0 &amp;&amp;

de esta manera primero se pregunta si videos.mylist es undefined y si no lo es ahi si preunta si length es >0.

ojala les sea util-

Luis Carlos Kristen Ospitia

student•

https://platzi.com/comentario/893552/

Jhony Alexander Garcia Gómez

student•

Muchas gracias por el aporte, sabes por que a Oscar en la clase no le sale ese error?

Wandy Rafael Santana Evangelista

student•

Para los que les salga este error:

En la parte del useState, debemos inicializarlo de esta manera:

Espero poder ayudado! Nunca Paren de Aprender!

Enmanuel Castillo

student•

Grasias, me a serbido.

Chris Anthony Lopez Hernandez

student•

Gracias, si me funciono!!!

Carlos David Ramírez Gómez

student•

Para los que les sale en blanco cuando hacen el map, y no hay erro en consola, recuerden que el map devuelve el item del arreglo modificado, por lo que tiene que hacer el retorno del mismo. Esto se puede hacer principalmente de dos maneras.

La primera es pasando un paréntesis el cual significa que se retorna un valor, de esta manera

{ videos.mylist.map(item =&gt; (
	&lt;CarouselItem key={item.id} {...item} /&gt;
)) }

La otra forma es con un corchete, pero de esta forma se debe hacer el retorno de forma explicita, y sería de esta menera

{ videos.mylist.map(item =&gt; {
	return &lt;CarouselItem key={item.id} {...item} /&gt;
}) }

Ricardo Kevin

student•

Me salvaste bro, enserio, llevaba un rato viendo que pasaba y nada jajaja, gracias!

Brian Sánchez Izquierdo

student•

Bro sos tremendo capo, 20 minutos intentando todas las otras soluciones y está dio al blanco, muchas gracias.

Luis Ruiz Ramos

student•

Si les arroja que length no está definido es porque hay que inicializar mylist, como lo dijo Diego Osorio en un comentario más abajo.

const [videos, setVideos] = useState({
    'mylist': [],
    'trends': [],
    'originals': [],
  });```

Jhon Carlos Colorado Angulo

student•

Gracias por tu aporte.

HUGO ANDRES DIAZ BERNAL

student•

Me ayudaste resto!!!

JOSE ARMANDO QUIÑONEZ

student•

yo resolvi el detalle validando undefined ya que en la primera vuelta el useEffect muestra videos.etc como undefinde

  {videos.trends !== undefined && (
        <Category title='Trends'>
          {videos.mylist.length > 0 && (

            <Carousel>

              {videos.trends.map((item) => <CarouselItem key={item.id} {...item} />)}

            </Carousel>
          )}

        </Category>
      )}

Guillermo Loza Hernandez

student•

Me sirvió mucho tu solución. En mi proyecto tenía muchos arrays y tú manera de arreglarlo fue la que mejor se adapta.

Saludos! :D

José Daniel Navarrete Díaz

student•

Resolví el inconveniente dandole un estado inical al useState, y combiárselo cuando la promesa se resulva:

const [videos, setVideos] = useState({estado: false});

  useEffect( () =>{
    fetch('http://localhost:3000/initalState')
      .then(response => response.json())
      .then(data => setVideos({...videos, ...data, estado: true}));
  }, []);

y despúes en el condicional verificar este valor:

<Categories title="Tendencias">
        <Carousel>
          {
            videos.estado === true && (
              videos.trends.map(item => 
                <CarouselItem key={item.id}{...item}/>
              )
            )
          }
        </Carousel>
      </Categories>

David Behar

student•

Me sirvió tu solución, gracias

Leandro Videla

student•

Hola! Es necesario .++..videos++? Con pasarle ...data y estado: true ya funciona.

Andrés Felipe Eslava Zuluaga

student•

App.jsx

import React, { useState, useEffect } from 'react';
import Header from '../components/Header';
import Footer from '../components/Footer';
import '../assets/styles/App.scss';
import Search from '../components/Search';
import Categories from '../components/Categories';
import Carousel from '../components/Carousel';
import CarouselItem from '../components/CarouselItem';

const App = () => {
  const API = 'https://localhost:3000/initialState';
  const [videos, setVideos] = useState({
    mylist: [],
    trends: [],
    originals: [],
  });
  useEffect(() => {
    fetch(API)
      .then((response) => response.json())
      .then((data) => setVideos(data)); /** Se asigna nuevos valores a videos */
  }, []);

  return (
    <>
      <Header />
      <Search />

      <Categories title='Mi lista'>
        <Carousel>
          {videos.mylist?.map((item) => {
            return (
              <CarouselItem key={item.id} {...item} />
            );
          })}
        </Carousel>
      </Categories>

      <Categories title='Originals'>
        <Carousel>
          {videos.originals?.map((item) => {
            return (
              <CarouselItem key={item.id} {...item} />
            );
          })}
        </Carousel>
      </Categories>

      <Categories title='Trend'>
        <Carousel>
          {videos.trends?.map((item) => {
            return (
              <CarouselItem key={item.id} {...item} />
            );
          })}
        </Carousel>
      </Categories>

      <Footer />
    </>
  );
};

export default App;

Cesar Augusto Barco de Gouveia

student•

Si tu problema es que cuando corres la aplicación no te consume la API por que se inicia en undefined entonces tu solución es: https://platzi.com/comentario/709193/.

Asis Melgarejo Lopez

student•

Aquí está el ++REPOSITORIO DEL CURSO++: https://github.com/platzi/platzivideo

platzerito02112019 platzerito02112019

student•

App.jsx

import React, { useState, useEffect } from 'react';
import Header from '../components/Header';
import Search from '../components/Search';
import Categories from '../components/Categories';
import Carousel from '../components/Carousel';
import CarouselItem from '../components/CarouselItem';
import Footer from '../components/Footer';
import '../assets/styles/App.scss';
const App = () => {
    const [ videos, setVideos ] = useState({ mylist: [], trends: [], originals: []});

    useEffect(() => {
        fetch('http://localhost:3000/initalState')
            .then(response => response.json())
            .then(data => setVideos(data));

    }, []);

    console.log(videos)
    return (
        <div className="App">
            <Header />
            <Search />

            {/* {videos.mylist.length !== undefined  &&  */}
            {videos.mylist.length > 0 && 

            <Categories title="Mi lista">
                <Carousel>
                    <CarouselItem/>                                                                      
                </Carousel>
            </Categories>
            }
            <Categories title="Tendencias">
                <Carousel>
                    {videos.trends.map(item =>
                        <CarouselItem key={item.id} {...item} />
                    )}                                                            
                </Carousel>
            </Categories>

            <Categories title="Originale de platzi">
                <Carousel>
                    <CarouselItem/>
                                                                 
                </Carousel>
            </Categories>

            <Footer />
        </div>

    )
};
export default App;

Carouselitem.jsx

import React from 'react';
import '../assets/styles/components/CarouselItem.scss';
import playIcon from '../assets/static/play-icon.png';
import plusIcon from '../assets/static/plus-icon.png';




const CarouselItem = ({cover, title, year, contentRating, duration}) => (
    <div className="carousel-item">
        <img className="carousel-item__img" src={cover} alt={title} />
        <div className="carousel-item__details">
          <div>
            <img className="carousel-item__details--img" src={playIcon} alt="Play Icon" /> 
            <img className="carousel-item__details--img" src={plusIcon} alt="Plus Icon" /> 
          </div>
          <p className="carousel-item__details--title">{title}</p>
          <p className="carousel-item__details--subtitle">
            {`${year} ${contentRating} ${duration}`}
          </p>
        </div>
    </div>
);

export default CarouselItem;```

Andrés Campuzano Garzón

student•

Hola, en App.jsx porque agregaste estos valores cuando el profesor no los había agregado?

Tengo que agregar que los tuve que agregar para que el proyecto pudiera ejecutarse sin errores.

 const [ videos, setVideos ] = useState({ mylist: [], trends: [], originals: []});```

Jesús Gerardo Gómez Betancourt

student•

Hola en mi proyecto no me renderiza nada dentro del map, nisiquiera un <p>Ejemplo</p> Saben a que se deba esto ?

Juan David Franco

student•

la función map se aplica sobre una constante o variable que tenga un conjunto de datos

Por ejemplo, para la constante numbers;

const numbers = [1,2,3]

si se aplica la funcion map

const doubleNumbers = numbers.map((number)=>number * 2)

debería retornar el valor de 2, 4, 6. por que la función map, recorre a todo el array para efectuar una operacion de todos los datos de ese

esa es la razón por la que una etiqueta aislada <p></p> no funciona para eso

rusbel bermúdez rivera

student•

Sí recibes error con lo hecho hasta el minuto 2:41 , es porque "mylist" no esta declarada dentro del objeto, el fix es declarlo dentro de useState, use el console.log para testear fuera del return.

const App = () => {
  const [videos, setVideos] = useState({ mylist: [] });

  useEffect(() => {
    fetch('http://localhost:3000/initialState')
      .then((response) => response.json())
      .then((data) => setVideos(data));
  }, []);
  console.log(videos.mylist.length);

Enrique Sardon Manrique

student•

pero hacer eso para cada uno de los elementos, ¿no es poco practico? La cosa es la escalabilidad a futuro

Oscar Barajas Tavares

Team Platzi•

Gracias por compartir la solución.

Marcelo Gustavo Baez

student•

"Videos" da undefined porque se quiere acceder a su valor antes que este sea definido.

Esto sucede porque por detras el Hook useState invoca un metodo asincrono (tal como setSate), por lo cual puede no completarse cuando invocamos a videos

Juan Castro

teacher•

¡Correcto! Esto se debe a que nuestro estado inicial (useState([])) no tiene las propiedades trends y myList. Así que podemos cambiar el estado inicial a un objeto con las propiedades de las que vayamos a hacer fetch (https://platzi.com/comentario/709193/). Adicional, podemos verificar si el array de las propiedades del objeto que guardamos en nuestro estado tienen algún contenido y, en caso de que no, mostrar un símbolo cargando o algo así. :wink:

Joel Bello

student•

import { useState, useEffect } from 'react';

const useInitialState = (API) => {
  const [videos, setVideos] = useState({
    mylist: [],
    trends: [],
    originals: [],
  });
  useEffect(() => {
    fetch(API)
      .then((response) => response.json())
      .then((data) => setVideos(data));
  }, []);
  return videos;
};

export default useInitialState;```

Ricardo Medina

student•

Hey muchachos con humildad aqui les dejo mi version para este apartado:

import React, { useEffect, useState } from 'react';
import Header from './components/Header';
import Search from './components/Search';
import Categories from './components/Categories';
import Carousel from './components/Carousel';
import CarouselItem from './components/CarouselItem';
import Footer from './components/Footer';
import './assets/styles/App.scss';

const API = 'http://localhost:8080/initialState.json';

const App = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [videos, setVideos] = useState([]);

  useEffect(() => {
    fetch(API)
      .then((response) => response.json())
      .then((data) => {
        setIsLoading(false);
        setVideos(data);
      });
  }, []);

  const renderCarousel = () => {
    if (videos.length === 0) {
      return <></>;
    }

    const {
      initialState: { myList, originals, trends },
    } = videos;

    return (
      <>
        {myList && (
          <Categories title='Mi playlist'>
            <Carousel>
              {myList.map((item) => (
                <CarouselItem key={item.id} {...item} />
              ))}
            </Carousel>
          </Categories>
        )}
        <Categories title='Tendencias'>
          <Carousel>
            {trends.map((item) => (
              <CarouselItem key={item.id} {...item} />
            ))}
          </Carousel>
        </Categories>
      </>
    );
  };

  return (
    <div className='app'>
      <Header />
      <Search />
      {isLoading && 'Loading'}
      {renderCarousel()}
      <Footer />
    </div>
  );
};

export default App;

Espero les ayude : p

Gustavo Gonzalez Montero

student•

Al día de hoy, el error del length y del map lo resolví con los siguientes:

++Primera opción:++

...
videos.mylist?.length
...
videos.trends?.map
...

++Segunda opción++

  const [ videos, setVideos ] = useState({
    mylist: [],
    trends: [],
    originals: []
  })

Me parece más estética la primera opción, pero cada uno con su gusto. Si hay alguna razón más de peso o fundamental para usar una u otra, favor comentar.

Conectando la información de la API

¿Qué es React JS?

Aprende qué es React.js

DOM, Virtual DOM y React DOM

Crear una Aplicación con React JS

Create React App y Tipos de Componentes

JSX: JavaScript + HTML

Props: Comunicación entre Componentes

¿Qué son los métodos del ciclo vida?

State - Events

Instalación y configuración de entorno

Agregando compatibilidad con todos los navegadores usando Babel

Configurar un entorno de trabajo profesional

Webpack: Empaquetando nuestros módulos

Webpack Dev Server: Reporte de errores y Cambios en tiempo real

Estilos con SASS

Configuración final: ESLint y Git Ignore

Arquitectura de componentes para Platzi Video

Llevar un diseño de HTML y CSS a React

Estructura del Header

Estilos del Header

Estructura y Estilos del Buscador

Estructura y Estilos de Carousel y Carousel Item

Estructura y Estilos del Footer

Añadiendo imágenes con Webpack

Imports, Variables y Fuentes de Google en Sass

Uso de una API de desarrollo (Fake API)

Creando una Fake API

React Hooks: useEffect y useState

Lectura React Hooks

Conectando la información de la API

Custom Hooks

PropTypes

Usar React Tools

Debuggeando React con React DevTools

Prepárate para lo que sigue