0

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>
)
}
3
  • En productoDetails={producto} estas pasando una variable producto, ¿Eso esta bien o mas bien se esta pasando productos que traes con useSelector? . Ahora thumb_url viene dentro de productos y si es asi, ¿Como esta inicializada en tu init state?
    – g.4
    Commented el 26 jul. 2021 a las 17:56
  • ya actualize mi pregunta con los datos, asi es, se esta pasando productos que viene con useSelector
    – Invited
    Commented el 26 jul. 2021 a las 18:47
  • si, esta en el reducer: initialState={productos:[],loading:false,error:false},user era de un componente reciclar, pero el nombre ya lo habia corregido
    – Invited
    Commented el 26 jul. 2021 a las 20:06

1 respuesta 1

1

En tu componente ProductCard estas recibiendo productoDetails, el cual corresponde a una lista:

[
    {name:'manzana',
    thumb_url:'url'
    },
{name:'mango',
    thumb_url:'url'
    }
    ]

Lo correcto sería crear una instancia de ProductCard por cada elemento de tu lista o si quieres validar el comportamiento, puedes pasar el primer elemento de la lista. Comparto ambos ejemplos:

// prueba con el primer elemento



<ProductoCard productoDetails={productos[0]} className={styles.user} item={Socials} />


// crear una instancia por cada elemento


return ({productos.map((producto) => (<ProductoCard productoDetails={producto} className={styles.user} item={Socials} />))
})

Con respecto al error: "Cannot read property 'thumb_url' of undefined"

En tu ejemplo estas pasando como argumento "producto", siendo que tu lista se llama "productos", por lo tanto estas pasando nada, mucho menos podrás a acceder a una propiedad llamada "thumb_url" de nada, es decir: undefined

3
  • con.map funciona, pero existe una forma de pasar el estado de redux sin que se pieerda cuando presiono f5? si no tendre que usar map en todas mis llamadas
    – Invited
    Commented el 26 jul. 2021 a las 20:08
  • 1
    Puedes persistir el estado para prevenir que se pierda tras refrescar. Esto ya se discutió aquí: React Redux state is lost at page refresh Commented el 26 jul. 2021 a las 20:24
  • muchas gracias!
    – Invited
    Commented el 26 jul. 2021 a las 21:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.