我从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
1条答案
按热度按时间fjaof16o1#
我终于明白了。不得不把括号换成圆括号
之前:
之后:
希望这对将来的人有帮助。太愚蠢了,它被忽视了。