我正在開發一個全堆疊博客站點專案，在該專案中我為后端創建了一個 API 并且它作業正常，我正在從中獲取帖子，但是當我嘗試使用 map 對其進行迭代時，它拋出了我的錯誤
Server Error TypeError: Cannot read properties of undefined (reading 'map')，我正在使用 NextJS我的前端。
代碼
const Blogs = ({ blogs }) => {
return (
<div className='all-blogs'>
{blogs.map((blog) => (
<div className='single-blog' key={blog._id}>
<h1>{blog.title}</h1>
<p>{blog.text}</p>
</div>
))}
</div>
)
}
export async function getStaticProps() {
const res = await fetch(
'https://ed-blog-api.herokuapp.com/api/posts'
)
const blogs = await res.json()
return {
props: {
blogs,
},
}
}
我正在獲取的端點： https://ed-blog-api.herokuapp.com/api/posts
[
uj5u.com熱心網友回復：
這里的問題是blogs，作為 prop 值，在異步邏輯定義并填充它之前是未定義的。您可以通過幾種方式處理此問題。
提供一個默認的 prop 值。
const Blogs = ({ blogs = [] }) => { return ( <div className='all-blogs'> {blogs.map((blog) => ( <div className='single-blog' key={blog._id}> <h1>{blog.title}</h1> <p>{blog.text}</p> </div> ))} </div> ) }提供要映射的回退值。
const Blogs = ({ blogs }) => { return ( <div className='all-blogs'> {(blogs ?? []).map((blog) => ( <div className='single-blog' key={blog._id}> <h1>{blog.title}</h1> <p>{blog.text}</p> </div> ))} </div> ) }
請注意，如果 GET 請求失敗（即fetch回傳一個被拒絕的 Promise）或在處理請求/回應時拋出任何其他例外，那么您將需要使用try/catch. 要么向頁面提供有效的、定義的 prop 值，要么回傳發生錯誤或無法找到頁面內容。
export async function getStaticProps() {
let blogs = [];
try {
const res = await fetch('https://ed-blog-api.herokuapp.com/api/posts');
blogs = await res.json();
} catch(error) {
// handle error, logging, etc...
// maybe optionally returning `notFound: true` as a 404
}
return {
props: {
blogs,
},
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/351839.html
標籤：javascript 反应 接口 下一个.js