Reactjs TypeError:无法读取属性'；getPosts'；未定义的-使用查询钩子，反应功能组件

我确实试着寻找同一个问题，但所有的问题都是有角度的或无关的

我正在尝试使用Apollo的MongoDB、Express、React、Node、Graphql制作一个社交应用程序，下面是来自freecodecamp的视频： 在那个视频中，一切正常，但在他的部署版本中，他和我的错误是一样的

react_devtools_backend.js:2450类型错误：

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

在ae（Home.js:14） 在Jo（react dom.production.min.js:3274）

我的代码：我正在删除一个指向我的github回购的链接，其中包含整个项目：

堆栈溢出引发了太多缩进问题，因此我将我的github链接到上面的 代码太多了

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

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

---

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

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

或者，您可以利用来方便地引用它们

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);

---

使调试更简单，而不是：

常数{ 加载， 数据：{getPosts:posts} }=useQuery（FETCH\u POSTS\u QUERY）

做：

这是可行的，但当数据存在且不总是存在时就不行了

“不在数据时”、“不总是”？？？奇怪…'只有当

数据

存在时，才能定义posts。。。未定义时访问它将失败，始终。。。您必须检查“数据”

只有在以下情况下才能/应该呈现项目（帖子）：

• ！加载

和

• 数据！=未定义的

  -

  如果（数据）

  或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>
   )}
  

  {loading&&loading posts..}
  {数据&&(
  {员额&&
  posts.map（（post）=>(
  ))}
  )}
  

---

像这样使用此代码
const{loading，data:{posts}={}}=useQuery（FETCH\u posts\u QUERY）
这将解决问题
这将起作用
在网格中写入data.getPosts
const{loading，data，error}=useQuery（FETCH\u POSTS\u QUERY）
if（error）返回

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>

{加载？（加载柱…）
：（data.getPosts&&
data.getPosts.map（（post）=>(

现在我遇到了这个错误：

类型错误：无法读取未定义的属性“posts”

@GayatriDipali，更新了答案以显式显示完整的gql语句。它只对我有效了一分钟，现在它抛出了相同的错误它可能与

Home.js

无关。可能

SinglePost.js

？读取文档！“数据”处于加载状态时可以未定义…

if（加载）{return“loading”}；

在主返回之前（以及解构或访问更深层次的“data”属性）防止此类错误ehhhh，查看网络选项卡-响应包含错误-错误数据，错误结果…

error

也可以从钩子中派生出来，并且应该阻止呈现，如POST的加载应为200，始终…“对于不可为null的字段POST.username不能返回null。”第54项为null…呈现jsoned“posts”（或在返回前插入“debugger”）检查它…禁用缩小，很难检查控制台

if（数据）console.log（posts）中显示错误的位置

返回之前感谢您的调试技巧奏效，现在我能够知道错误的实际情况，我得到了网络错误，这是您编写返回错误的行中的问题可用…仅在一个深度级别上，有些人可能需要更多的解释来更好地理解您的答案。需要将数据定义为n对象。将默认值设置为空对象，即旧行为。旧？HOCs？…如果要重构到挂钩，则可以使用新行为（未定义的

数据

）-可以将

如果（！数据）

用作一般未就绪条件，而不依赖于某些更深层次（也未定义）的属性

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

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