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

Posted 2023-02-22

【中文标题】TypeError：从 API 获取时无法读取未定义的属性（读取“地图”）

【英文标题】：TypeError: cannot read property of undefined (reading 'map') while fetching from API

【发布时间】：2021-12-20 00:12:14

【问题描述】：

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

[

【参考方案1】：

这里的问题是 blogs 作为一个 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,
    ,
  

【讨论】：

但是 fetch 在 getStaticProps 内部，除非 fetch 出错，否则应该始终定义 props，只有在函数组件内声明 fetch 时，您的参数才正确。

@ChemiAdel 我没有说props 是未定义的，这在 React 中是不可能的。我说blogs 属性值是未定义的。换句话说，尚未为其分配值。

@ChemiAdel 有道理。如果请求在getStaticProps 内部失败，blogs 只会在Blog 内部成为undefined（请注意，当 Next.js 预渲染页面时，服务器上会发生错误）。这里更好的解决方案是在getStaticProps中正确处理API调用。

@juliomalves 我不同意你的评论，补充一点说明。