tengo un problema, tengo una aplicación que hace llamado a una api, y utiliza redux para el estado de la aplicación, el llamado a la api esta funcionando bien, el problema es cuando quiero pasar ese estado a un componente por medio de props, cuando hago eso todo se rompe, que puedo hacer?, gracias
const dispatch = useDispatch()
useEffect(()=>{
//consulta api
const cargarProducto=()=>dispatch(obtenerProductosAction())
cargarProducto()
},[])
const productos = useSelector(state=>state.productos.productos)
const error = useSelector(state=>state.productos.error)
const cargando = useSelector(state=>state.productos.loading)
la consola de productos devuelve mi arreglo que necesito:
[
{name:'manzana',
thumb_url:'url'
},
{name:'mango',
thumb_url:'url'
}
]
///hasta qui todo bien
<ProductoCard productoDetails={producto} className={styles.user} item={Socials} />
//aqui al intentar pasar el estado por props, "funciona", peero si yo doy F5 todo deja de funcionar y me devuelve este error:
TypeError: Cannot read property 'thumb_url' of undefined
si quito mi componente ProductoCard puedo dar f5 cuantas veces quiera y todo funciona.
datos en componente ProductoCard:
const User = ({ productoDetails }) => {
return (
<div className={styles.avatar}>
<img src={productoDetails.thumb_url} alt="Avatar" />
</div>
<p>{productoDetails.name}</p>
)
}
productoDetails={producto}
estas pasando una variableproducto
, ¿Eso esta bien o mas bien se esta pasandoproductos
que traes conuseSelector
? . Ahorathumb_url
viene dentro deproductos
y si es asi, ¿Como esta inicializada en tu initstate
?