Custom Hooks para la tienda

Clase 20 de 30 • Curso de React 17 con Webpack 5 y Sass

Hernán David Mercado Fernández

student•

Si estás aprendiendo React no es recomendable que uses el autocompletado de VSC o Github Copilot, permitele a tu memoria muscular adaptarse a la sintaxis y lógica, luego que lo domines a la perfección siente libre de usarlos para ahorrar tiempo de escritura.

fidel agustin fuentes

student•

es lo mismo que decir , acostumbrate a poder calcular raices cudradas, o divisiones de 4 cifras a mano y luego utiliza la calculadora, mientras entendas lo que esta haciendo no tiene sentido

Gilberto Santamaria

student•

Totalmente de acuerdo, estas herramientas no se deben usar si se está aprendiendo porque pueden hacer código que no entendamos .

Douglas Lovera

student•

Recomiendo añadirle un estado de "loading" al custom hook:

export default function useGetProducts(API) {
  const [products, setProducts] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

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

  return { products, isLoading };
}

También se le podría añadir un estado de error 🤔

Mike Arthur Pinta Pacheco

student•

Que gran idea, justo estaba pensando en eso. Tambien gracias por mostrar usar fetch en vez de axio!

Luis Alejandro Vera Hernandez

student•

Uff calidad!

Braulio Rivas Abad

student•

En React, podemos crear hooks por nuestra propia cuenta, donde nosotros podemos escribir toda la funcionalidad que deseamos. Ahora, haremos un hook el cual servirá para realizar la petición a todos los productos y traer su precio, imágen y descripción.

//useGetProducts.js
import { useEffect, useState } from 'react';
import axios from 'axios';

const useGetProducts = (API) => {
    const [products, setProducts] = useState([]);

	useEffect(async () => {
		const response = await axios(API);
		setProducts(response.data);
	}, [])

    return products;
}

export default useGetProducts;

El hook es muy sencillo. En el, creamos una array llamado products. Después con ayuda de useEffect realizamos una solicitud a una API (que es pasada como argumento), para traernos toda la información y guardarla con ayuda de axios. setProducts (de useState) guarda el response. Al final regresamos products.

Para poder usar el custom hook, lo implementamos en ProductList

// ProductList.jsx
import useGetProducts from '@hooks/useGetProducts'; // Lo importamos

const API = 'https://api.escuelajs.co/api/v1/products';

const ProductList = () => {
	const products = useGetProducts(API);

	return (
		<section className="main-container">
			<div className="ProductList">
				{products.map(product => (
					<ProductItem product={product} key={product.id}/>
				))}
			</div>
		</section>
	);
}

Ahora, creamos una constante llamada products que será el mismo array el cual contiene toda la información de los productos. En el, le pasamos API que será un argumento del hook. Como ya sabemos, más abajo en el div, usamos el método map para el array, en donde por cada producto creará una etiqueta del componente ProductItem. ProductItem recibe como datos un key, que es igual a product. id y también product que es igual al producto del array.

Para poder aprovechar esta información, editamos ProductItem.

import React, { useState } from 'react';
import '@styles/ProductItem.scss';
import buttonAddCart from '@icons/bt_add_to_cart.svg'

const ProductItem = ({product}) => {
	const [cart, setCart] = useState([]);

	const handleClick = () => {
		setCart([]);
	}

	return (
		<div className="ProductItem">
			<img src={product.images[0]} alt={product.title} />
			<div className="product-info">
				<div>
					<p>${product.price}</p>
					<p>{product.title}</p>
				</div>
				<figure onClick={handleClick}>
					<img src={buttonAddCart} alt="" />
				</figure>
			</div>
		</div>
	);
}

export default ProductItem;

En product item, recibimos estos datos en argumentos de la función dentro de llaves. Más abajo, en img, alt, y p, usamos las características de cada producto que son la imágen, titulo, descripción y precio. Así, podemos mostrar la información que corresponde a cada una.

Pedro Alvarado Garcia

student•

Tu aportes son excelentes. Muchas gracias.

Elias Moises Jimenez Lopez

student•

excelente

Obed Paz

student•

Les comparto ambas formas para traer datos de una API:

Fetch (nativa), y con axios.

Ademas de como manejar el ciclo de vida cuando el componente va a ++desmontarse++ y el request de los datos no quede en el aire, sino que aborte dicho request.

const useGetProducts = () => {
	const [products, setProducts] = useState([]);
	const [loading, setLoading] = useState(true);
	const API = 'https://api.escuelajs.co/api/v1/products?limit=12&offset=0';

	// With fetch API
	useEffect(async () => {
      	const controller = new AbortController();
	    const { signal } = controller;
      
		try {
			const response = await fetch(API, { signal });
			const data = await response.json();

			if (data) {
				setProducts([...products, ...data]);
				setLoading(false);
			}
		} catch (err) {
			console.log('Error: ', err);
		}

		return () => controller.abort();
	}, []);

	// With axios
	useEffect(async () => {
		const cancelToken = axios.CancelToken;
		const source = cancelToken.source();

		try {
			const { data } = await axios(API, { cancelToken: source.token });

			if (data) {
				setProducts([...products, ...data]);
				setLoading(false);
			}
		} catch (err) {
			if (axios.isCancel(err)) {
				return 'axios request cancelled';
			}
			console.log('Error: ', err);
		}

		return () => source.cancel('axios request cancelled');
	}, []);

	return { products, loading };
};

cancelling-requests-with-fetch-or-axios

Julian Franco

student•

¿Cuál es la funcionalidad de esto ? Intente replciarlo pero me generar un error con el products.map

Juan Sebastian Obregón Cuellar

student•

Para no estar repitiendo la palabra product (product.price, product.title) se puede hacer uso de la desestructuración con cada uno de los atributos

  const { id, title, price, images } = product;

Javier Vásquez Castellano

student•

Recomendacion: no usar async/await como parámetro en useEffect, aqui un ejemplo para modificarlo function Example() { const [data, dataSet] = useState<any>(null)

useEffect(() => { async function fetchMyAPI() { let response = await fetch('api/data') response = await response.json() dataSet(response) }

fetchMyAPI()

}, [])

return <div>{JSON.stringify(data)}</div> }

César Palma

student•

podrías explicar la razon?

Edgar Bautista Cabrera

student•

La razón es que useEffect lo único que puede retornar es una función que se utiliza para "sanear" el efecto. Ejemplo, limpiar un setInterval. Si usas async, lo que devuelve es una promesa, la cual, no sanearía el efecto

useEffect

Abraham Serrano Montiel

student•

Para el fetching de datos pueden utilizar algo nativo como fetch(), ya que así se libraran de librerías extras en su proyecto.

  const [products, setProducts] = useState([]);

  const API = "https://api.escuelajs.co/api/v1/products";
  const fetchApi = async () => {
    await fetch(API)
      .then((response) => response.json())
      .then((data) => setProducts(data));
  };

  useEffect(() => {
    fetchApi();
  }, []);

Rodrigo Andrés Moreno Pertúz

student•

Gracias es lo unico que me funcionó pero hace una carga infinita....

Perez Holvert

student•

Hola chicos por si a alguno le sucede que al momento de poner la foto le da un error de que no existe la propiedad [0], la solución es:

product.images?.[0],

al parecer como es asíncrono al momento de renderizar no encuentra datos sino hasta que se resuelve toda la petición por ende debemos utilizar el signo de exclamación en la propiedad images, este va a renderizar el valor solo cuando images exista dentro de product

David Castro

student•

Buen aporte, Gracias por compartir amigo!

Anyilo José Rangel Arias

student•

me salía ese error y la solución estaba en que en

const ProductItem = ({product}) => {
  const [cart, setCart] = useState([]);
  const handleClick = () => {
    setCart([]);

No le había colocado las llaves a product.

Gregson Murcia Castro

student•

En mi caso me gusta esta forma para desestructurar los props de react

  const { images, title, price } = product;

Andres López

student•

Yo hice lo mismo, me gusta mas así

Jorge Garcia

student•

en la mad.... ahora entiendo todo lo que te dice de hooks en teoria son funciones o clases creadas en modulos, que te explico el profe que no se le entiende cuando habla... jaja gracias a los que me dijeron que viera dos veces el tutorial de JS profesional

Juan Montero

student•

Sale un error en la consola por el uso de async dentro del useEffect(), se corrige así:

<import { useEffect, useState } from "react";
import axios from "axios";

const useGetProducts = (API) => {

  const [products, setProducts] = useState([]);

//se saca el fecth de los datos del UseEffec
  async function fetchData() {
    const response = await axios(API);
    setProducts(response.data);
  }

  useEffect(() => {
    fetchData();
  }, []);

  return products;
};

export default useGetProducts;>

Ever Jose

student•

Gracias!!

Jorge Zerpa

student•

Hola chicos! las últimas versiones de React te dan un error cuando colocas el async directamente en el useEffect:

	useEffect(async()=>{
		const response = await axios(API);
		setPorducts(response.data);
	}, [])

para solucionarlo, debes crear otra función asíncrona y luego llamarla DENTRO del bloque del useEffect:

	useEffect(()=>{
		async function fetchData(){
			const response = await axios(API);
			setPorducts(response.data);
		}		
		fetchData()
	}, [])

Támbien Puedes crear la función fuera del bloque y luego llamarla dentro:

	async function fetchData(){
		const response = await axios(API);
		setPorducts(response.data);
	}		

	useEffect(()=>{
		fetchData()
	}, [])

Espero tengan un gran dia! el curso esta increíble!! <3

Camilo Ramírez

student•

Gente, por cierto, si no quieren usar axios pueden usar fetch tranquilamente:

import { useEffect, useState } from "react";

const useGetProducts = (API) => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(API)
      const data = await response.json()
      setProducts(data)
    }
    fetchData()
  }, [])
  return products
}

export { useGetProducts }

Cristian Flores Méndez

student•

No me aparecían los datos de la api pero si me hacia el mapeo Mi error fue no poner los corchetes al llamar product, no me percate de eso y estuve batallando una hora con eso

Comparto por si a alguien le pasa algo similar 😅 Ya funcionando este fue uno de los artículos que mas me dio risa

Axel Joel Rojas Hernández

student•

Llevaba media hora revisando el código, no encontraba donde estaba mi error 🤡 Gracias 🫡

Carlos Villafrades

student•

amigos les agradezco si alguien puede ayudarme, no me salen las imágenes y llevo como 1 hora y media dándole vueltas y nada que encuentro solución, si me aparecen los títulos y los precios, pero las imágenes no, solo me aparecen las 3 ultimas imágenes. y en los comentario no vi a nadie que le pasara lo mismo

Diego Fernando Caviedes Camaho

student•

mira que esto este bien product.images[0]

Gustavo Ortega

student•

Ayuda a mí me pasa lo mismo, y ya revisé la línea de <img src={product.images[0]} alt={product.title} /> y sigue sin salir la imagen del producto

David Santiago Benjumea Pérez

student•

Tengo una duda, por que a Oscar le funciona mandar "product" y dentro posee un objeto, a mi me pone este error:Uncaught Error: Objects are not valid as a React child (found: object with keys {products}). If you meant to render a collection of children, use an array instead.

Paniagua Cesar

student•

Tendrías que compartir tu código para saber que problema tienes

Cristian Felipe Espinosa Barajas

student•

También tuve ese problema, mi error fue poner "product.image[0]" en vez de "product.images[0]", la S me rompió todo el código xd

Kevin Figuera

student•

mi practica:

import React from 'react';
import ProductItem from '@components/ProductItem';
import '@styles/ProductList.scss';
import useGetProducts from "@hooks/useGetProducts";

const API = 'https://api.escuelajs.co/api/v1/products';

const ProductList = () => {
    const products = useGetProducts(API);
    return (
        <section className="main-container">
            <div className="ProductList">
                {products.map(product => (
                    <ProductItem key={product.id} product={product}/>
                ))}
            </div>
        </section>
    );
}

export default ProductList;

import {useEffect, useState} from 'react';
import axios from "axios";

const useGetProducts = (API) => {
    const [products, setProducts] = useState([]);
    useEffect(async () => {
        const response = await axios.get(API + '?limit=15&offset=0');
        setProducts(response.data);
    }, []);
    return products;
}

export default useGetProducts;

import React, {useState} from 'react';
import '@styles/ProductItem.scss';
import btAddToCart from '@icons/bt_add_to_cart.svg';

const ProductItem = ({product}) => {
    const {id, title, price, images} = product;
	const [cart, setCart] = useState([]);
	const addToCart = () => {
		setCart([]);
	}
    return (
        <div className="ProductItem">
            <img
                src={images[0]}
                alt={title}/>
            <div className="product-info">
                <div>
                    <p>${price}</p>
                    <p>{title}</p>
                </div>
                <figure onClick={addToCart}>
                    <img src={btAddToCart} alt=""/>
                </figure>
            </div>
        </div>
    );
}

export default ProductItem;

Alejandro Repizp

student•

Una forma de darle formato al precio de nuestro productos.

<p>
	{ new Intl.NumberFormat('en-US', 
		{ 
			style: 'currency', 
			currency: 'USD'
		}
	).format(product.price)}
</p>

Eduardo Robles

student•

Me distraje viendo si podía hacer un filtrado y que solo tomara la cantidad de fotos que tu quieras, ya que lo hice, lo comparto.

William Cortés

student•

Otra forma como podemos completar la key, es con la opción: index, que tiene el .map como segundo argumento de la función callback

key={index}

César Palma

student•

ese índice hace referencia al índice del array, desaconsejado usar ese índice para renderizar

Custom Hooks para la tienda

Introducción a React

¿Qué es React.js?

Conceptos fundamentales de React

Configurando el entorno de desarrollo para React

Análisis de dependencias en proyectos de React

Instalación de React y React DOM

Configuración de Webpack y Babel

Cambios en tiempo real con Webpack

React con CSS y Sass

Maquetación en React

Transformando HTML y CSS en componentes de React

Estilos en los componentes de React

Páginas, rutas y componentes

React Router DOM

Navegación entre rutas

Header en todas las rutas

¿Qué es Atomic Design? Conoce los beneficios

Solución al reto: componentes y rutas de React Shop

Tipos de componentes en React: stateful vs. stateless

Imágenes y alias en Webpack

Lógica con React Hooks

React.useState

Toggle del menú

useEffect y consumo de APIs

Custom Hooks para la tienda

useRef y formularios

React Context

Completando el carrito de compras

Orden de compra

Calculando el precio total

Eliminando productos del carrito

Deploy

Cómo comprar tu dominio y conexión con Cloudflare

Automatizando el despliegue con GitHub Actions

Próximos pasos

Retos de React.js (bug hunters)

Continúa con el Curso Práctico de Next.js