为什么当我成功得到响应时我的数据变成未定义的?
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)
我不知道为什么我在 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)