使用SWR获取数据时出现Uncaught TypeError错误求助

问题根源 #

SWR 在数据请求完成前，返回的 data 是 undefined，直接访问 data.dashboards 这类嵌套属性就会触发该错误。而你用 useEffect 时，要么是在请求回调完成后才处理数据，要么是加了数据存在性判断，所以没出现问题。

具体解决方案 #

• 用可选链操作符规避：访问嵌套属性时添加 ?.，避免链式访问中出现 undefined 报错

  const { data } = useSWR('/api/dashboard', fetcher);
  const postsCount = data?.dashboards?.posts;
  

• 设置默认值：解构时给 data 设置默认空结构，确保嵌套属性访问有依托

  const { data = { dashboards: {} } } = useSWR('/api/dashboard', fetcher);
  const likesCount = data.dashboards.likes; // 不会报错，值为 undefined 或实际数据
  

• 先判断加载状态再渲染：在组件中先检查 data 是否存在，再渲染对应内容

  const { data } = useSWR('/api/dashboard', fetcher);
  
  if (!data) return <div>加载中...</div>;
  
  return (
    <div>
      <p>帖子数：{data.dashboards.posts}</p>
      <p>粉丝数：{data.dashboards.followers}</p>
    </div>
  );
  

内容的提问来源于stack exchange，提问作者Alpha Fiend