TypeError：从 API 获取时无法读取未定义的属性（读取“地图”）

Question

我正在开发一个全栈博客站点项目，在该项目中我为后端创建了一个 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

[

Answer 1

这里的问题是 blogs 作为一个 prop 值，在异步逻辑定义并填充它之前是未定义的。你可以通过几种方式来处理这个问题。

1. 提供一个默认的道具值。

   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>
     )
   }
   

2. 提供一个用于映射的后备值。

   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,
    },
  }
}