React调用dummyapi渲染列表报data/map undefined错误排查

• 数据嵌套取值逻辑错误：useQuery会将请求完成后的完整响应挂载到自身返回的data字段上，而你调用的接口响应结构内又存在一层data字段存储帖子数组，直接对useQuery返回的data调用map方法，实际拿到的是整个接口响应对象而非帖子数组；请求未完成的pending阶段，useQuery返回的data默认值为undefined，此时访问map方法会直接抛出data.map() is undefined报错。
• 缺失异步状态兜底：请求从发出到返回的过程中组件会先执行一次初始渲染，你没有对加载、错误状态做判断就直接渲染依赖异步返回的数据，必然触发undefined相关报错。

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

// 封装帖子列表请求方法
const fetchPostList = async () => {
  const response = await axios.get('你的dummyapi帖子列表接口地址', {
    headers: {
      'app-id': '替换为你自己的dummyapi应用ID'
    }
  });
  // 提前返回接口中存储帖子数组的data字段，减少后续嵌套取值
  return response.data.data;
};

export default function PostList() {
  // 解构useQuery返回值，将返回的帖子数组重命名为posts，同时取出加载、错误状态
  const {
    data: posts,
    isLoading,
    isError,
    error
  } = useQuery({
    queryKey: ['postList'],
    queryFn: fetchPostList
  });

  // 加载状态兜底渲染
  if (isLoading) {
    return <div>帖子数据加载中...</div>
  }

  // 错误状态兜底渲染
  if (isError) {
    return <div>数据加载失败：{error.message}</div>
  }

  return (
    <div className="post-list-container">
      {/* 此时posts已确定为帖子数组，可安全调用map遍历 */}
      {posts.map((post) => (
        <div className="post-item" key={post.id}>
          <p>帖子ID：{post.id}</p>
          {/* 后续需要渲染image、likes、tags等其他帖子字段，直接在该节点下补充即可 */}
        </div>
      ))}
    </div>
  )
}

• 不推荐在渲染阶段做多层data取值（比如写data.data.map()），这类写法可读性差，非常容易因为层级写错触发报错，建议在请求函数中就把需要的数组字段提前返回。
• 所有依赖异步请求结果的渲染逻辑，必须放在加载、错误态判断之后，保证执行渲染时数据类型符合预期，避免初始渲染阶段访问undefined的属性/方法。
• 遍历数组渲染列表项时，必须给列表项根节点传入唯一的key属性，直接使用接口返回的帖子id即可满足要求。

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