类型错误:无法读取未定义的属性“getPosts" - useQuery hook，react Functional Components [英] TypeError: Cannot read property 'getPosts' of undefined - useQuery hook, react Functional Components

问题描述

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

我正在尝试使用 MongoDB、Express、React、Node、Graphql 和 Apollo 制作一个社交应用程序，我正在关注来自 freecodecamp 的视频:

解决方案

让调试更简单:

<块引用>

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

做:

const { data, loading, error } = useQuery(FETCH_POSTS_QUERY);如果(数据){控制台日志(数据)；const { getPosts: 帖子 } = 数据；}如果(错误){控制台日志(错误)；返回错误"；//阻塞渲染}

<块引用>

这有效，但在数据存在时无效，并不总是

不是当数据"，不总是"???奇怪......只有当 data 存在时才能定义posts"......在 undefined 时访问它会失败，总是......你必须检查 'data'

您可以/应该仅在以下情况下呈现项目(帖子):

• !loading

AND

• data != undefined - if(data) or (data && in JSX

   {loading &&<h1>正在加载帖子..</h1>}{数据&&(<Transition.Group>{帖子&&post.map((post) => (<Grid.Column key={post.id} style={{ marginBottom: 20 }}><明信片 post={post}/></Grid.Column>))}</Transition.Group>)}

I did try searching for the same question but all of those were of either angular or unrelated,

I am trying to make a Social app using MongoDB, Express, React, Node, Graphql with Apollo, I am following a video from freecodecamp : Link to the video In that video everything worked fine but in his deployed version he is having the same error as mine

react_devtools_backend.js:2450 TypeError:

Cannot read property 'getPosts' of undefined

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

link to the deployed app

My Code: I am dropping a link to my github repo containing the whole project : Link to github repo

Stack Overflow was throwing too many indentation issues so i have linked my github above as there is too much of code

• I'm using semantic-ui for styling
• I'm using graphql the fetch posts from MongoDB
• Apollo Client for rendering data

This is the error I am getting in the Home.js: Screen Shot of the error:

解决方案

Make it simpler to debug, instead:

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

do:

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
}

this works but not when data is there and not always

"not when data", "not always"??? weird ... 'posts' can be defined only if data exists ... accessing it when undefined will fail, always ... you must check 'data'

You can/should render items (posts) ONLY when:

• !loading

AND

• data != undefined - if(data) or (data && in 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>
   )}
  

这篇关于类型错误:无法读取未定义的属性“getPosts" - useQuery hook，react Functional Components的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！