Podemos destructurar las propiedades del objeto initialState definidos en el hook useInitialState de la siguiente forma:
const{state:{cart}}=useContext(AppContext);
De esta manera nos evitamos escribir state. cada que hagamos referencia a una propiedad del objeto.
{cart.length>0?<div>{cart.length}</div>:null}
Puede que no sea muy relevante en este caso... Por el momento, pero imaginate cuando tengamos un objeto con muchas propiedades. 😀💚
muchas gracias por el dato
Que util! muchas gracias!
Sugerencia para el profesor: utilizar menos palabras de decoración (muletillas):
"lo que sería"
"y aquí lo que vamos a hacer entonces sería"
"lo que es", etc.
Personalmente me estresa mucho ese aspecto.
Eso no quita el buen trabajo realizado en otros aspectos de la clase.
Por lo tanto xd
Mm no me percate de esos detalles y por suerte no me estresa.
Una alternativa es usar el operador '&&' y así evitar poner la validacion negativa:
{cart.length>0&&<div>{cart.length}</div>}
Buen dato
Hasta podriamos hacer asi:
{cart.length&&<div>{cart.length}</div>}
Implementé que se pueda agregar, pero sin repetir el producto, y además, que se pueda quitar del Cart. Dejo el código por si alguien quiere revisarlo.
++useInitialState.js : ++
-Agregamos la validación con el método INCLUDES que viene por defecto en los tipos Array.
-Agregamos la función removeFromCart, y la exportamos para poder usarla desde fuera.
ProductItem.jsx :
-Importamos un ícono nuevo para poner cuando el producto esté agregado al cart, en vez del verde.
-Usamos useState para guardar el valor en verdadero o falso, llamado addedToCart... el cuál indica si está agregado o no.
-Agregamos la lógica que muestra una imagen u otra dependiendo el estado de addedToCart.
-Agregamos la función handleRemove y llamamos al método RemoveFromCart creado anteriormente en useInitialState.js
Yo hice una pequeño cambio, en la mayoria de comercio electronico con un carrito despues de 9 producto muestra un +9, yo lo hice de la siguiente manera
La emocion que siento cada vez que me sale, no tiene nombre.
Lo mas lindo es que hace mas de 10 clases que no me trabo por falta de actualizacino, me trabo repitiendo el video y tratando de entender. Hermoso todo, estoy fascinado
Si quieren que en su carrito de compras se vea un "+9" cuando agregan más de 9 elementos, pueden utilizar la siguiente lógica:
Hola Melvin, me estuvo pasando lo mismo y no dejé que me comieran los errores en este curso, pero de plano despues de unas 4 horas de cambiar cosas, me decidí por hacer pull desde el proyecto del maestro, tuve mas errores y regresé a mi rama principal con git, volvi a hacer el npm install (con mis archivos originales, porque hice muchas correcciones por la actualizacion que tengo arriba con respecto al maestro) y de alguna forma ya jaló, eso y lo de las clases que siguen. Intenta con npm install, tal vez haya algo desactualizado.
Yo intenté con NPM install y tampoco me funciona. Tengo la consola sin errores.
Quizás algo cambió desde que se creó ese video hasta entonces :/
Alguien a encontrado una solución a este error ?
Al parecer no se puede leer la propiedad de Undefined. Intente debuggear y note que state me da undefined como resultado. Por lo que si state no existe entonces tampoco existe la propiedad cart. Pero ya hice todo lo que hizo el maestro , busque dentro del proyecto y tampoco logro encontrar una respuesta clara.
Header.jsx
importReact,{ useState, useContext }from'react';importAppContextfrom'../context/AppContext';constHeader=()=>{const[toggle, setToggle]=useState(false);const{ state }=useContext(AppContext);{state.cart.length>0?<div>{state.cart.length}</div>:null}
Tengo un problema similar un par de clases adelante, pero aun no he encontrado la solución.
Intenta revisar tu app.jsx igual y no estas usando bien el Context.Provider
Solucion a este error
El error esta en useInitialState.js
El return debe ser un objeto, se tiene que poner entre corchetes { }
si lo pones con paréntesis sale el error.
Forma correcta
return{ state, addToCart
}
¡Muchas gracias! Ya casi me volvía loco buscando el error. Jajaja
Hola. Todo venía muy bien, pero no puedo ver los datos de la api, solo el menú y no tengo idea de dónde puede estar el errror.
Este es mi app.jsx no se si está aquí
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from '@containers/Layout';
import Home from '@pages/Home';
import Login from '@pages/Login';
import PasswordRecovery from '@pages/PasswordRecovery';
import SendEmail from '@pages/SendEmail';
import NewPassword from '@pages/NewPassword';
import MyAccount from '@pages/MyAccount';
import CreateAccount from '@pages/CreateAccount';
import Checkout from '@pages/Checkout';
import Orders from '@pages/Orders';
import NotFound from '@pages/NotFound';
import AppContext from '../context/AppContext';
import useInitialState from '../hooks/useInitialState';
import '@styles/global.css';
importReactfrom'react';importHeaderfrom'@components/Header';constLayout=({ children })=>{return(<div className="Layout"><Header/>{ children }</div>);}exportdefaultLayout;
¿Este error es por algo que pude haber echo mal? O por qué ya no funcionan las API de ejemplo? La terminal no me tira error, pero no me cargan las imágenes...
La API si esta funcionando, creo que la han actualizado pero funciona, igual puedes probar con la url en el navegador, para saber si es un error en tu código o es que la url no esta bien escrita.
También, pueden validarlo de la siguiente forma:
{!!cartItems &&<div>{cartItems}</div>}
cartItems = state.cart.length #Como lo tiene el profesor.
!!cartItems ===Boolean(cartItems) # Ambas formas funcionan como state.cart.length>0
Esto es para validar que hayan elementos. Es como el de comprobar que la longitud sea mayor que 0 (ya que el 0 en booleano es falso).
Creo que es una forma + limpia y fácil de leer😉
Este curso esta como desactualizado
Obviamente estoy haciendo el curso de nuevo. No es tan facil como uno piensa pero nunca se bajan los brazos. Complementen con documentos oficiales, saludos
Un manera de ver los estados o tus hooks podemos usar esta extension de Chorme.
Usando la consola del navegador.
React Developer Tools
products.map is not a function
No te esta reconociendo products como una array, puede ser un error de Type o no estas definiendo bien products en donde lo estas usando.
Hola, de repente me dejo de reconocer las rutas con los alias y tuve que volver a usar las rutas normales, ¿alguien sabe por que?
Si tienes repo en GitHub dejalo para poder revisar que puede ser.
Mis alias:
alias:{'@components': path.resolve(__dirname,'src/components/'),// alias para importar componentes'@containers': path.resolve(__dirname,'src/containers/'),// alias para importar containers'@pages': path.resolve(__dirname,'src/pages/'),// alias para importar paginas'@styles': path.resolve(__dirname,'src/styles/'),// alias para importar estilos'@icons': path.resolve(__dirname,'src/assets/icons/'),// alias para importar iconos'@logos': path.resolve(__dirname,'src/assets/logos/'),// alias para importar logos'@hooks': path.resolve(__dirname,'src/hooks'),// alias para importar hooks'@context': path.resolve(__dirname,'src/context'),// alias para importar context},},
