我正在嘗試使用從 Twitch API 檢索到的資料來創建一個主播串列。但是當我嘗試映射道具時，getServerSideProps我得到了一個空白頁面。如果我console.log，我得到了所有資料，但在映射時，我什么也得不到。
我正在使用以下代碼：
export default function Home( { users } ) {
console.log(users);
return (
<div>
<Head>
<title>Twitch</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div className=''>
{users.map((user) => (
<div key={user.id}>
<h1>{user.display_name}</h1>
</div>
))}
</div>
</div>
)
}
export async function getServerSideProps() {
const res = await fetch('http://localhost:3000/api/users')
const data = await res.json()
const [users] = await Promise.all([data])
return {
props: {
users
}
}
}
console.log回報：
(3) [{…}, {…}, {…}]
0: {data: Array(1)}
1: {data: Array(1)}
2: {data: Array(1)}
uj5u.com熱心網友回復：
我認為我們應該檢查一下您的控制臺日志中的資料是什么樣的。
(3) [{…}, {…}, {…}]
0: {data: Array(1)}
1: {data: Array(1)}
2: {data: Array(1)}
根據您的模板查看任何可能不會回傳您認為的內容的內容？
我看到一個帶有資料陣列的物件串列，因此您的模板代碼可能看起來更像：
{users.map((user) => (
<div key={user.data[0].id}>
<h1>{user.data[0].display_name}</h1>
</div>
))}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/533891.html