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.
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
Totalmente de acuerdo, estas herramientas no se deben usar si se está aprendiendo porque pueden hacer código que no entendamos .
Recomiendo añadirle un estado de "loading" al custom hook:
Que gran idea, justo estaba pensando en eso. Tambien gracias por mostrar usar fetch en vez de axio!
Uff calidad!
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.
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.jsximportuseGetProductsfrom'@hooks/useGetProducts';// Lo importamosconstAPI='https://api.escuelajs.co/api/v1/products';constProductList=()=>{const products =useGetProducts(API);return(<sectionclassName="main-container"><divclassName="ProductList">{products.map(product=>(<ProductItemproduct={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.
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.
Tu aportes son excelentes. Muchas gracias.
excelente
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.
constuseGetProducts=()=>{const[products, setProducts]=useState([]);const[loading, setLoading]=useState(true);constAPI='https://api.escuelajs.co/api/v1/products?limit=12&offset=0';// With fetch APIuseEffect(async()=>{const controller =newAbortController();const{ signal }= controller;try{const response =awaitfetch(API,{ signal });const data =await response.json();if(data){setProducts([...products,...data]);setLoading(false);}}catch(err){console.log('Error: ', err);}return()=> controller.abort();},[]);// With axiosuseEffect(async()=>{const cancelToken = axios.CancelToken;const source = cancelToken.source();try{const{ data }=awaitaxios(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
¿Cuál es la funcionalidad de esto ? Intente replciarlo pero me generar un error con el products.map
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;
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>
}
podrías explicar la razon?
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
Para el fetching de datos pueden utilizar algo nativo como fetch(), ya que así se libraran de librerías extras en su proyecto.
Gracias es lo unico que me funcionó pero hace una carga infinita....
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
En mi caso me gusta esta forma para desestructurar los props de react
const{ images, title, price }= product;
Yo hice lo mismo, me gusta mas así
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
Sale un error en la consola por el uso de async dentro del useEffect(), se corrige así:
<import{ useEffect, useState }from"react";importaxiosfrom"axios";constuseGetProducts=(API)=>{const[products, setProducts]=useState([]);//se saca el fecth de los datos del UseEffecasyncfunctionfetchData(){const response =awaitaxios(API);setProducts(response.data);}useEffect(()=>{fetchData();},[]);return products;};exportdefault useGetProducts;>
Gracias!!
Hola chicos! las últimas versiones de React te dan un error cuando colocas el async directamente en el useEffect:
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
Llevaba media hora revisando el código, no encontraba donde estaba mi error 🤡
Gracias 🫡
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
mira que esto este bien product.images[0]
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
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.
Tendrías que compartir tu código para saber que problema tienes
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
