使用效率重新渲染来自supabase查询的相同结果

发布于 2025-02-03 05:50:45 字数 824 浏览 4 评论 0原文

我正在使用用户的书签列表。因此，当我尝试在使用效果内进行查询时，它每次都会呈现结果。

const [posts, setPosts] = useState([])

useEffect(() => {
    async function getBookmarks() {
        await supabase
            .from('bookmarks')
            .select('post_id')
            .match({ user_id: user.id })
            .then(res => {
                res.data.map(async (bk) => {
                    await supabase
                        .from('post')
                        .select('id,description,songlink,created_at,author,profiles:author(username)')
                        .match({ id: bk.post_id })
                        .single()
                        .then(res => setPosts(posts => [...posts, res.data]))
                })
            })
    }   

    getBookmarks()
}, [])

我不想获得两次或更多的结果，但我不知道我在做什么错。

原文

I'm working with a user's bookmarks list. So, when I tried to render it doing the queries inside useEffect, it renders the result each time.

const [posts, setPosts] = useState([])

useEffect(() => {
    async function getBookmarks() {
        await supabase
            .from('bookmarks')
            .select('post_id')
            .match({ user_id: user.id })
            .then(res => {
                res.data.map(async (bk) => {
                    await supabase
                        .from('post')
                        .select('id,description,songlink,created_at,author,profiles:author(username)')
                        .match({ id: bk.post_id })
                        .single()
                        .then(res => setPosts(posts => [...posts, res.data]))
                })
            })
    }   

    getBookmarks()
}, [])

I don't want to get the same result twice or more, but I don't know what I'm doing wrong.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梨涡少年 2025-02-10 05:50:45

更好地了解您想要做什么来做些什么可能会有所帮助，而不是为了帮助人们更好地回答这一点。我在代码中看到的是您要数据，然后再次询问。了解表的数据结构是否会有所帮助，我不确定您是否需要在此处进行多个接听电话。

https://supabase.com/docs/docs/reference/reference/reference/javascript/javascript/select/select/select 加入，您应该能够做类似的事情

.from('bookmarks').select(`post_id:post_id ( id, description, songlink, created_at )

it might be helpful to get a better understanding of what you're wanting it to do vs what it's actually doing for people to help answer this better. What I'm seeing here in the code is you asking for data and then asking again. Knowing the data structure of your tables could help, and I'm not sure that you need to be doing multiple fetch calls here.

https://supabase.com/docs/reference/javascript/select

if your tables are joined, you should be able to just do something like

.from('bookmarks').select(`post_id:post_id ( id, description, songlink, created_at )

回复收藏 0 原文

盗梦空间 2025-02-10 05:50:45

您可能需要使用Usecallback挂钩。没有尝试代码，但是您可以得到这个想法：

const [posts, setPosts] = useState([])

const getBookmarks = useCallback(async ()=>{
      await supabase
            .from('bookmarks')
            .select('post_id')
            .match({ user_id: user.id })
            .then(res => {
                res.data.map(async (bk) => {
                    await supabase
                        .from('post')
                        .select('id,description,songlink,created_at,author,profiles:author(username)')
                        .match({ id: bk.post_id })
                        .single()
                        .then(res => setPosts(posts => [...posts, res.data]))
                })
            })

},[])

useEffect(() => {
    getBookmarks()
}, [])

You might want to use useCallback hook. Didn't try the code but you can get the idea:

const [posts, setPosts] = useState([])

const getBookmarks = useCallback(async ()=>{
      await supabase
            .from('bookmarks')
            .select('post_id')
            .match({ user_id: user.id })
            .then(res => {
                res.data.map(async (bk) => {
                    await supabase
                        .from('post')
                        .select('id,description,songlink,created_at,author,profiles:author(username)')
                        .match({ id: bk.post_id })
                        .single()
                        .then(res => setPosts(posts => [...posts, res.data]))
                })
            })

},[])

useEffect(() => {
    getBookmarks()
}, [])

回复收藏 0 原文

~没有更多了~