Recibí este error llamado "Error de tipo: no se pueden leer las propiedades de undefined (leyendo 'dividir')" . Sé de dónde vino el error, pero no sé cómo poner el código correcto en él. Estoy usando Next.js y TailwindCSS :)
El siguiente código es lo que escribí:
{productCategories.map(m => ( <li className="group relative hover:cursor-pointer" key={m.databaseId} onClick={() => onClickParentMenu(m.databaseId)}> <Link passHref href={`/${m.url.split('/').splice(2, 2).join('/')}`}> <a className={`${router.asPath === '/' ? 'hover:text-white' : 'text-black hover:opacity-50'} ${clickedParentId === m.databaseId && 'font-bold'}`}>{m.name}</a> </Link> <ul className="absolute hidden text-gray-500 pt-4 group-hover:block"> {m.children.nodes.map(c => ( <li key={c.databaseId} className="w-auto whitespace-nowrap shadow-md bg-white hover:bg-gray-100 hover:text-black py-2 px-4 block" onClick={() => onClickChildMenu(c.databaseId)}> <Link passHref href={`/product-category/${m.slug}/${c.slug}`}> <a className={`${clickedChildId === c.databaseId && 'font-bold'}`}>{c.name}</a> </Link> </li> ))} </ul> </li> ))}El código que da el error:
<Link passHref href={`/${m.url.split('/').splice(2, 2).join('/')}`}>Dentro del mismo archivo de su componente, puede definir:
function extractURL(category) { if (!category.url) { // handle the problem somehow and return an appropriate value } return `/${category.url.split('/').splice(2, 2).join('/')}`; }Y llámalo como:
<Link passHref href={extractURL(m)}>...</Link>Por ejemplo, puede insertar cualquier código JavaScript en el mapa y devolver el código JSX a través de retorno:
{productCategories.map(m => { let href = ''; if (m.url) { href = m.url.split('/').splice(2, 2).join('/'); } return ( <li className="group relative hover:cursor-pointer" key={m.databaseId} onClick={() => onClickParentMenu(m.databaseId)}> <Link passHref href={`/${href}`}> <a className={`${router.asPath === '/' ? 'hover:text-white' : 'text-black hover:opacity-50'} ${clickedParentId === m.databaseId && 'font-bold'}`}>{m.name}</a> </Link> <ul className="absolute hidden text-gray-500 pt-4 group-hover:block"> {m.children.nodes.map(c => ( <li key={c.databaseId} className="w-auto whitespace-nowrap shadow-md bg-white hover:bg-gray-100 hover:text-black py-2 px-4 block" onClick={() => onClickChildMenu(c.databaseId)}> <Link passHref href={`/product-category/${m.slug}/${c.slug}`}> <a className={`${clickedChildId === c.databaseId && 'font-bold'}`}>{c.name}</a> </Link> </li> ))} </ul> </li> ) })}