es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Por qué mis datos se vuelven indefinidos cuando obtengo una respuesta exitosa?

01 Aug, 2023 Programación

No sé por qué obtengo “indefinido” cuando intenté hacer “console.log” en mi paso final en “UseEffect”.

He obtenido la respuesta correctamente, la respuesta me devuelve un estado 200 y datos en él.

Diseñé mi base de datos de la siguiente manera.

2 tablas,
Tabla “animes” contiene títulos de anime únicos e incremento automático del “id”.

Tabla “anime_detail” contiene una clave externa que está vinculada con el “anime_title” en la tabla “animes”.

Entonces, en mi código, traté de obtener “anime_title” en mi tabla “animes” en Superbase basado en el “id” del “useParams”.

He obtenido ambos correctamente y he utilizado con éxito el “anime_title” para obtener todos los “anime_episode” basados en el “anime_title”.

Pero cuando intenté hacer “console.log” en el último paso, me devuelve un valor “indefinido”, lo cual no sé por qué.

Aquí está mi código:

import { useState, useEffect } from "react"
import './animedetail.css'
import { useParams } from 'react-router-dom'
import { supabase } from '../../supabaseClient';

function AnimeDetail(){

    let animeID = useParams()

    useEffect(async () => {
        // OBTENER ID
        let id = await animeID.id
        console.log(id)

        // CONSULTAR CON ID
        const {data, error} = await supabase
        .from('animes')
        .select('id, anime_title, anime_url')
        .match({id: id})

        // OBTENER TÍTULO DEL ANIME POR ID
        let animeTitle = await data[0].anime_title
        console.log(animeTitle)

        // OBTENER EPISODIOS BASADO EN EL TÍTULO DEL ANIME
        const {dataInfo} = await supabase
        .from(`anime_detail`)
        .select(`id, anime_title, anime_url, anime_episode`)
        .filter(`anime_title`, `in`, `(${animeTitle})`)

        console.log(dataInfo)
    }, [animeID])


    return (
        <>
        <div classname="anime-list-section">
        <h2>Anime Detail:</h2>

        </div>

    )
}
export default AnimeDetail
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    La razón por la que obtienes undefined al intentar console.log en el paso final de tu useEffect es porque no estás estableciendo el estado con los datos recuperados.

    En tu código, solo estás almacenando los datos en una variable (dataInfo) e intentando console.log en ella. En cambio, debes establecer el estado usando el gancho useState y luego console.log en la sección de return.

    Esto es lo que debes hacer:

    1. Agrega lo siguiente al comienzo del componente:
    const [episodes, setEpisodes] = useState([]);

    Esto crea una variable de estado llamada episodes y una función que actualizará el estado llamada setEpisodes.

    1. Reemplaza console.log(dataInfo) con setEpisodes(dataInfo).

    Esto establece el estado con los datos recuperados.

    1. Mueve la declaración console.log(episodes) a la sección de return:
    return (
  <>
    <div classname="anime-list-section">
      <h2>Detalles del Anime:</h2>
      <p>{episodes}</p> // Agrega esta línea para mostrar los episodios
    </div>

);

    Esto mostrará los datos recuperados en el componente.

    Con estos cambios, tu componente debería mostrar ahora los datos recuperados en lugar de undefined.

Comments are closed.