Estoy tratando de mapear objetos en mi matriz que funciona muy bien, pero se convierte en un problema cuando intento mapear solo uno de los objetos. Mi código de matriz es el siguiente
const slides = [ { index: 0, title: 'Slide', path: '/slide', component: slide, }, { index: 1, title: 'Slide1', path: '/slide1', component: slide1, }, { index: 2, title: 'Slide12', path: '/slide2', component: slide2, }, ];Aquí está mi código jsx
{slides.map((item) => { if (auth.verify(Roles.role1)) { return ( <Tab label={item.title} key={item.index} component={Link} to={item.path} /> ); } else { return ( <Tab label={slides[0].title} key={slides[0].index} component={Link} to={slides[0].path} /> ) } })}}
Este código está funcionando muy bien para la primera parte de if , pero para lo else está poniendo el primer objeto de la matriz [0] tres veces debido al .map(item) así que he intentado poner la declaración if fuera de él como este
if (auth.verify(Roles.role1)) { {slides.map((item) => {pero esto no me permite ejecutar el código y no estoy seguro de por qué. Soy nuevo en reaccionar y agradecería de todos modos que la declaración if se ejecute correctamente sin iterar a través de los tres objetos de matriz.
Si entiendo su problema correctamente, desea mapear todas las diapositivas, si auth auth.verify(Roles.role1) es true . Para lograr esto, puedes hacer esto en tu jsx:
{auth.verify(Roles.role1) ? ( slides.map((item) => ( <Tab label={item.title} key={item.index} component={Link} to={item.path} /> )) ) : ( <Tab label={slides[0].title} key={slides[0].index} component={Link} to={slides[0].path} /> )}Si la autenticación es verdadera, asignamos los elementos y los mostramos, y si no es cierto, solo mostramos el primero, su error fue que asignó todos los elementos de todos modos, por lo que incluso si la autenticación fuera falsa, la primera diapositiva sería se muestra tres veces.
Cuando asigna una matriz, está asignando algo para cada elemento de la matriz. Esta es la razón por la que solo proporcionar else sin una condición devuelve el elemento 3 veces (la cantidad de elementos que quedan en su matriz). Intente usar una condición para devolver solo el primer índice.
return ( <div className={styles.container}> <SideNavButton /> <div className={styles.card}> <Box boxShadow={10}> <Tabs value={selectedTab} className={styles.tabs}> {slides.map((item) => { if (auth.verify(Roles.role1)) { return <Tab label={item.title} key={item.index} component={Link} to={item.path} />; } else if (index === 0) { return <Tab label={item.title} key={item.index} component={Link} to={item.path} />; } })} </Tabs> </Box> </div> </div> );