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

Posted 2023-02-21

【中文标题】TypeError：无法读取未定义的属性“getPosts”-useQuery 挂钩，反应功能组件

【英文标题】：TypeError: Cannot read property 'getPosts' of undefined - useQuery hook, react Functional Components

【发布时间】：2021-02-24 04:18:07

【问题描述】：

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

我正在尝试使用 MongoDB、Express、React、Node、Graphql 和 Apollo 制作一个社交应用，我正在关注来自 freecodecamp 的视频：Link to the video 在那个视频中，一切正常，但在他部署的版本中，他遇到了和我一样的错误

react_devtools_backend.js:2450 类型错误：

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

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

link to the deployed app

我的代码： 我正在删除一个指向我的 github 存储库的链接，其中包含整个项目：Link to github repo

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

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

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

【问题讨论】：

阅读文档！ 'data' 可以在加载状态时未定义 ...if(loading) return "loading" ; 在主返回之前（以及解构或对更深层次的 'data' 属性的任何访问）可防止此类错误

apollographql.com/docs/react/api/react/hooks/#example-2 apollographql.com/docs/react/data/queries/#executing-a-query

ehhhh，查看网络选项卡 - 响应包含错误 - 错误数据，错误结果...error 也可以从钩子派生，并且应该像加载一样阻止渲染

对于 POST 应该是 200，总是……“不能为不可为空的字段 Post.username 返回 null。”第 54 项为空...渲染 jsoned 'posts'（或在返回之前插入'debugger'）以检查它...禁用缩小，很难检查控制台中显示的点错误

if(data) console.log(posts); 返回前

【参考方案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

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

“不是当数据”，“不是总是”？？？奇怪...'posts'只有在data存在时才能被定义...在未定义时访问它总是会失败...你必须检查'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>
 )

【讨论】：

感谢您的调试技巧起作用 现在我能够知道实际的错误是什么，我收到了网络错误，这是您写 return 的那一行的问题错误

【参考方案2】：

像这样使用这段代码

const loading, data: posts = = useQuery(FETCH_POSTS_QUERY);

【讨论】：

可用 ... 仅用于一个深度级别

有些人可能需要对object destructuring 进行更多解释，以便更好地理解您的答案。

需要将数据定义为对象。将默认设置为空对象，这是旧的行为。

旧的？ HOC？ ...如果您要重构为钩子，那么您可以使用新行为（未定义 data） - 您可以使用 if(!data) 作为一般未就绪条件，而不依赖于一些更深（也未定义）的道具

【参考方案3】：

您需要定义如下查询操作：

export const FETCH_POSTS_QUERY = gql`
  query GetPosts 
    getPosts 
      // fields
    
  
`

或者，您可以使用alias 轻松引用它们。

export const FETCH_POSTS_QUERY = gql`
  query GetPosts 
    posts: getPosts 
      // fields
    
  
`

const 
  loading,
  data:  posts  // uses alias directly. no need to rename
 = useQuery(FETCH_POSTS_QUERY);

【讨论】：

现在我收到这个错误：TypeError: Cannot read property 'posts' of undefined

@GayatriDipali，更新了答案以明确显示完整的 gql 语句。

它只为我工作了一分钟，现在它抛出了同样的错误

可能与Home.js无关。也许SinglePost.js？

【参考方案4】：

const  loading, data:  getPosts: posts  =   = useQuery(FETCH_POSTS_QUERY)

这应该可以解决问题

【参考方案5】：

这将起作用

在网格内写入 data.getPosts

const loading ,data , error = useQuery(FETCH_POSTS_QUERY);

如果（错误）返回Error! $error.message；

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