javascript 为什么我的数据没有渲染,即使我清楚地从我的控制台输出中获得结果?

bqf10yzr  于 2023-03-11  发布在  Java
关注(0)|答案(1)|浏览(122)

我从supabase获取数据并将其作为prop传递,然后使用常用的map迭代数据并显示所需的值。但由于某种原因,我无法显示它。我以为getServerSideProps在页面呈现之前返回了数据。我在console.log(programme.title)上得到了正确的结果,但没有呈现任何内容。

import React from 'react'
import { createClient } from '@supabase/supabase-js'

export async function getServerSideProps() {
    const supabase = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)
    const { data: programmes, error }: any = await supabase
            .from('Programmes')
            .select('*')
  
    return {
      props: {
        programmes,
      },
    }
}

function programmes({programmes}: any) {

  return (
    <>
        <div className='mx-auto px-12'>
            <div className='my-24  flex flex-col'>
                <h1 className='font-extrabold text-5xl'>Les programmes Natyf</h1>
                <p>Actualités, films dramatiques, comédies, documentaires, talk-shows, spectacles de variétés et d’humour hauts en couleurs et en saveurs!</p>
            </div>

            {programmes.map((programme: any) => {
                <div>          
                    {console.log(programme.title)}
                    <div className="max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
                        <a href="#">
                            <img className="rounded-t-lg" src="/docs/images/blog/image-1.jpg" alt="" />
                        </a>
                        <div className="p-5">
                            <h5 className="text-xl tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-cyan-500 to-blue-500">{programme.show_time}</h5>
                            <h2 className='text-2xl font-bold text-white'>{programme.title}</h2>
                            <p className="my-4 font-normal text-gray-700 dark:text-gray-400">{programme.description}</p>
                        </div>
                    </div>
                </div>
            })}

       </div>
    </>
    
  )
}

export default programmes

一开始我试着创建一个从supabase返回数据的函数,并通过useEffect()调用该函数,但我很快意识到对象在呈现时为空,所以我改用getServerSideProps

fjaof16o

fjaof16o1#

我终于明白了。不得不把括号换成圆括号
之前:

{programmes.map((programme: any) => {...}

之后:

{programmes.map((programme: any) => (...)

希望这对将来的人有帮助。太愚蠢了,它被忽视了。

相关问题