React-Apollo报错：Cannot read property 'map' of undefined 求助

嘿，我看了你遇到的麻烦——明明console.log(getUser.pets)能拿到对象数组，但就是渲染不出来，对吧？结合你的代码情况，我整理了几个大概率的问题点和解决办法：

• 默认值设置错误：你现在写的const { data: { getUser = [] } } = this.props;有个小问题——getUser本身是个包含pets属性的对象，不是数组。当Apollo查询还在异步加载时，getUser会被默认赋值成数组，这时候getUser.pets就会变成undefined，遍历自然就失效了。把默认值改成空对象就好：

  const { data: { getUser = {} } } = this.props;
  

• 缺少空值检查导致遍历失败：即使改了默认值，初始状态下getUser.pets可能还是undefined（比如查询还没返回数据时），直接用map会报错或者无输出。你可以用两种方式处理：

  1. 可选链操作符（推荐）：

     {getUser.pets?.map(pet => (
       <div key={pet.id}>{pet.name}</div>
     ))}
     

  2. 条件判断+空数组兜底：

     {(getUser.pets || []).map(pet => (
       <div key={pet.id}>{pet.name}</div>
     ))}
     

• 确认GraphQL查询字段完整性：检查你的查询语句里，是否明确请求了pets下的所有需要渲染的字段（比如id、name、age这些）。如果查询时只写了pets而没嵌套子字段，就算console.log能看到数组，里面的对象也会是空的，自然渲染不出内容。

另外，也可以加个加载状态提示，提升用户体验：

const { loading, error, data: { getUser = {} } } = this.props;

if (loading) return <div>加载中...</div>;
if (error) return <div>查询出错：{error.message}</div>;

return (
  <div>
    {getUser.pets?.map(pet => (
      <div key={pet.id}>{pet.name}</div>
    ))}
  </div>
);

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