为什么当我成功得到响应时我的数据变成未定义的?

Why my data get undefined when I successfully get the response?

我不知道为什么我在 UseEffect

的最后一步尝试 console.log 时得到 undefined

我已经成功收到回复,回复 return 给我,里面有 200 个状态和数据。

我的数据库是这样设计的

2 tables, animes table 包含唯一 anime_title 和自动递增 id.

id  anime_title anime_image anime_url

anime_detail table 包含与 animes 中的 anime-title 链接的外键 table

id anime_title anime_episode anime_url

所以在我的代码中,我试图根据 useParams[= 中的 id 在我的 animes table 中获取 anime_title 32=]

两个都成功拿到了,并且在anime_title

的基础上成功用anime_title拿到了所有的anime_episode

但是当我尝试 console.log 最后一步时,它 return 给我 undefined 值,我不知道为什么。

这是我的代码:

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 () => {
        // GET ID
        let id = await animeID.id
        console.log(id)

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

        // GET ANIME TITLE BY ID
        let animeTitle = await data[0].anime_title
        console.log(animeTitle)

        // GET EPISODE BASED ON ANIME TITLE
        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>
        <p></p>
        </div>
        </>
    )

}
export default AnimeDetail 

根据 supabase-js (https://supabase.com/docs/reference/javascript/filter) 的文档,过滤查询的结果中没有 dataInfo。相反,它就是您执行第一个查询时所拥有的。

像下面这样解构结果来收集你的信息

// GET EPISODE BASED ON ANIME TITLE
const const {data: dataInfo, error: errorInfo } = await supabase // no dataInfo, but data, error like in the documentation
    .from(`anime_detail`)
    .select(`id, anime_title, anime_url, anime_episode`)
    .filter(`anime_title`, `in`, `(${animeTitle})`)

console.log(dataInfo)