React应用中GraphQL查询数据无法映射渲染问题求助

你的核心问题是数据解构时的键名不匹配，导致posts始终是空数组，所以页面加载后无内容渲染。

错误原因 #

你的GraphQL查询定义的根字段是getPosts：

query GetPosts {
  getPosts {
    _id
    postAuthor
    postText
  }
}

但在组件里你错误地尝试从data?.post获取数据：

const posts = data?.post || [];

实际上Apollo Client返回的data对象结构是{ getPosts: [...] }，data?.post会返回undefined，最终posts被赋值为空数组[]，自然没有内容可渲染。

修复步骤 #

1. 修正数据赋值语句，将data?.post改为data?.getPosts：

const posts = data?.getPosts || [];

2. 补充React列表项要求的唯一key（避免控制台警告），用post._id作为标识：

{posts.map((post) => {
  return (
    <div className="event post" key={post._id}>
      {/* 其余组件代码保持不变 */}
    </div>
  );
})}

额外验证说明 #

• 你的测试代码能正常输出数据，说明Apollo Client配置、GraphQL查询本身均无问题，排除了网络或后端服务异常的可能。
• Semantic UI的ui feed与event类本身不存在渲染阻塞问题，只要有合法数据传入就能正常展示样式。

修正后重新运行项目，页面即可正常渲染所有帖子内容。

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