reactjs - TypeError：无法读取未定义的属性“getPosts”-useQuery 挂钩，反应功能组件

Question

我确实尝试过搜索相同的问题，但所有这些都是有角度的或无关的，

我正在尝试使用 MongoDB、Express、React、Node、Graphql 和 Apollo 制作社交应用程序，我正在关注来自 freecodecamp 的视频：链接到视频 在该视频中一切正常，但在他部署的版本中，他遇到了同样的错误作为我的

react_devtools_backend.js:2450 类型错误：

无法读取未定义的属性“getPosts”

在 ae (Home.js:14) 在 Jo (react-dom.production.min.js:3274)

链接到已部署的应用程序

我的代码： 我正在删除包含整个项目的 github 存储库的链接：链接到 github 存储库

Stack Overflow 引发了太多缩进问题，所以我在上面链接了我的 github，因为代码太多

• 我正在使用语义 UI 进行样式设置
• 我正在使用 graphql 从 MongoDB 获取帖子
• 用于渲染数据的 Apollo Client

这是我在 Home.js 中遇到 的错误：错误的屏幕截图：

标签： reactjsgraphqlreact-hooksapollo-clientreact-functional-component

Answer 1

使调试更简单，而不是：

常量 { 加载，数据： { getPosts: 帖子 } } = useQuery(FETCH_POSTS_QUERY);

做：

const { data, loading, error } = useQuery(FETCH_POSTS_QUERY);
if(data) {
  console.log(data);
  const { getPosts: posts } = data;
}
if(error) {
  console.log(error);
  return "error"; // blocks rendering
}

这有效，但在数据存在且并非总是如此时无效

“不是当数据”，“不是总是”？？？很奇怪......“帖子”只有在data存在时才能定义......当未定义时访问它总是会失败......你必须检查“数据”

您可以/应该仅在以下情况下呈现项目（帖子）：

• !loading

和

• data != undefined-if(data)或(data && 在 JSX 中

   {loading && <h1>Loading posts..</h1>}
   {data && (
     <Transition.Group>
       {posts &&
         posts.map((post) => (
           <Grid.Column key={post.id} style={{ marginBottom: 20 }}>
             <PostCard post={post} />
           </Grid.Column>
         ))}
     </Transition.Group>
   )}