Tengo acceso al estado desde redux const { isauthenticated, user } = useSelector((state) => state.user);
pero como se puede ver en el código de abajo
<div className="container-fluid upnavcon"> <span className="navbar-brand fs-1 gwen">Gadget Zone</span> {isauthenticated ? ( <div className="buttonbox"> <Link className="upnavbtns" to="/LogSign"> Login / Signup </Link> </div> ) : ( <> <SpeedDial ariaLabel="SpeedDial tooltip example" onClose={() => setOpen(false)} onOpen={() => setOpen(true)} open={open} direction="down" icon={ <img className="speedDialIcon" src={`${user.avatar.url?user.avatar.url:"/logo192.png"}`} alt="pic" /> } > <SpeedDialAction icon={<DashboardIcon/>} tooltipTitle="DAshboard"/> <SpeedDialAction icon={<DashboardIcon/>} tooltipTitle="DAshboard"/> </SpeedDial> </> )} </div> que si el usuario está autenticado, entonces estoy mostrando algo más, el problema es que Cannot read properties of undefined (reading 'url') y al final del error dice
Consider adding an error boundary to your tree to customize error handling behavior.Mi estado al recargar es loading:false, isauthenticated:true y después de 2 segundos se carga:false, isauthenticated:true,user{...}
Como Hunter McMillen agregó en los comentarios, parece que user.avatar no está definido.
entonces cuando creas la expresión ternaria:
user.avatar.url ? user.avatar.url : "/logo192.png" Está fallando en user.avatar.url porque user.avatar no está definido.
Puede solucionar esto con el encadenamiento opcional , de la siguiente manera:
user.avatar?.url ? user.avatar.url : "/logo192.png" Editar: como dijo Ahmad Faraz en los comentarios, puede simplificar aún más esto a user.avatar?.url || "/logo192.png" , no es necesario utilizar una expresión ternaria.
Parece que user.avatar puede estar indefinido. Para corregir el error, simplemente agregue una marca en esa línea:
src={`${user.avatar?.url ? user.avatar.url : "/logo192.png"}`}¿Cómo estás almacenando tu estado? Podría intentar usar ternario cuando lo esté llamando, no es la forma correcta de solucionarlo, pero podría intentar esto.
const { está autenticado, usuario } = useSelector((estado) => estado?.usuario);