Error: Response[0].subcategorias | React Router: Navegación en una SPA | Alura Latam

Error: Response[0].subcategorias

He completado el curso de React Router pero al finalizar me doy cuenta que algo falla en mi código, pues al oprimir el Link de categoría comportamiento y el link de bienestar me aparecen las mismas dos subcategorias: higiene y salud, comportamiento si enlaza los posts pero no enlaza sus subcategorías para mostrarlas (ver imagenes a continuación).

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

He revisado el código y la explicación que encuentro se da en la siguiente parte:

    useEffect(() => {
        buscar(`/categorias?identificador=${identificador}`, (response) => {
            setSubcategorias(response[0].subcategorias)
        })
    }, [identificador])

Al ejecutar un console.log de el valor de --> response[itemDelArreglo].subcategorias me arroja informacioń diferente:

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad Lo que me lleva a pensar que debido a que se refencia en el código de la clase como ** --> response[0].subcategorias** es el motivo por el cual solo me regresa los valores que se encuentran en bienestra y no en comportamiento.

Tambien observo que el enlace es hacia salud y no compórtamiento:

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Quisiera que me ayudaran a aclarar la duda por favor :) y si es posible me expliquen como puedo elegir cuando sea [0] o cuando [1].

Muchas gracias.

¡Hola German!

Por lo que veo, el problema que estás experimentando se debe a que estás accediendo siempre al primer elemento del arreglo response al hacer response[0].subcategorias. Si bien esto funciona para la primera categoría, cuando se trata de la segunda categoría, el arreglo de subcategorías se encuentra en response[1].subcategorias.

Para solucionar esto, puedes hacer uso de la variable identificador que estás pasando como parámetro en la función buscar. Esta variable contiene el identificador de la categoría que se está buscando, por lo que puedes utilizarla para encontrar el índice correspondiente en el arreglo response.

Por ejemplo, podrías hacer algo como esto:

useEffect(() => {
  buscar(`/categorias?identificador=${identificador}`, (response) => {
    const categoria = response.find(categoria => categoria.identificador === identificador);
    if (categoria) {
      setSubcategorias(categoria.subcategorias);
    }
  });
}, [identificador]);

En este caso, estamos utilizando la función find para buscar la categoría correspondiente al identificador que estamos pasando como parámetro. Si la encontramos, entonces podemos acceder a su arreglo de subcategorías y establecerlo en el estado.

Espero que esto te ayude a solucionar el problema. Si tienes alguna otra duda, no dudes en preguntar. ¡Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios