React中Hook设置的API数据在自定义函数中访问异常的问题求助

为什么会出现这个错误？ #

其实核心原因是组件初始渲染时数据还没加载完成：

• 你初始化useState({})，所以组件第一次渲染时post是一个空对象，post.comments_list自然是undefined。
• 当你调用renderComments()时，尝试对undefined执行map方法，这在JavaScript里是不允许的，所以抛出TypeError: Cannot read property 'map' of undefined。
• 为什么渲染post.title时没报错？因为React在处理JSX表达式时，如果值是undefined、null或者false，会直接跳过渲染，不会抛出错误；但map是主动执行的JavaScript方法，不存在的话就会触发运行时错误。

几种可行的解决方法 #

1. 使用可选链操作符（最简洁推荐）

通过?.操作符先检查post.comments_list是否存在，再调用map，同时用|| []确保即使返回undefined也能渲染空数组：

const renderComments = () => { 
  return post.comments_list?.map(item => ( 
    <li key={item.slug}>{item.body}</li> 
  )) || []; 
};

2. 条件渲染，先判断再执行

在renderComments里先检查post.comments_list是否存在，不存在就返回空或者null：

const renderComments = () => { 
  if (!post.comments_list) return null; // 或者返回 <ul></ul> 保持结构
  return post.comments_list.map(item => ( 
    <li key={item.slug}>{item.body}</li> 
  )); 
};

3. 初始化时给comments_list设空数组

把useState的默认值改成包含空数组的对象，这样初始状态下post.comments_list就是合法数组，map不会报错：

const [post, setPost] = useState({ comments_list: [] }); 

4. 整体判断数据是否加载完成再渲染评论区

在组件的返回JSX里，先确认post.comments_list存在，再渲染评论列表：

return ( 
  <div id='post-details-page'> 
    <div id='post-details'> 
      <h1>{post.title}</h1> 
      <h4>Published on: {post.published_on}</h4> 
      <h4>Last edited: {post.last_edited}</h4> 
      <p>{post.body}</p> 
    </div>
    {/* 只有当comments_list存在时才渲染评论 */}
    {post.comments_list && (
      <ul>{renderComments()}</ul>
    )}
  </div> 
);

额外优化建议 #

你的useEffect依赖数组是空的，这意味着只有组件挂载时会请求一次数据。如果props.match.params.slug发生变化（比如通过路由切换到另一篇文章），组件不会重新请求数据。建议把slug加入依赖数组：

useEffect(() => { 
  const slug = props.match.params.slug; 
  const fetchData = async () => { 
    try { 
      const res = await API.get(`posts/${slug}`); 
      setPost(res.data); 
    } catch (err) { 
      console.log(err) 
    } 
  }; 
  fetchData(); 
}, [props.match.params.slug]); // 加入slug作为依赖

内容的提问来源于stack exchange，提问作者Alex Peniz