时间戳

首页 > 解决方案 > 无法映射 React 中的查询

reactjs - 无法映射 React 中的查询

问题描述

我使用 Apollo 和 React 来映射查询，但得到一个 TypeError：无法读取未定义的属性“映射”。

我不知道道具的传递是问题还是它自己的查询......

我知道查询是由片段组成的，但改变它并不能解决错误。

这是代码：

应用程序.js

import React from 'react';
import './App.css';

import { Query } from 'react-apollo'
import { gql } from  'apollo-boost'

import ListPosts from './components/ListPosts'

function App() {
  return (
    <Query query={GET_POSTS_QUERY}>
      {(data, loading, error) => {
        if (loading) return <div>loading</div>
        if (error) return <div>error</div>

        return <ListPosts posts={data.allPosts} />

      }}
    </Query>
  )
}

const GET_POSTS_QUERY = gql`
{
  allPosts {
    ... on PostType {
      title
      createdAt
      content
      postImage
      postedBy {
        username
      }
    }
    ... on Post2Type {
      title
      createdAt
      content
      postImage
      postedBy {
        username
      }
    }
  }
}

`

export default App;

ListPosts.js

import React from "react";

const ListPosts = ({ posts }) => (
    <div>
        {posts.map(post => (
            <div key={post.id}>
                <h1>{post.title}</h1>
            </div>
        ))}
    </div>
)

export default ListPosts;

有关更多上下文，这里是 JSON 中的响应

{
  "data": {
    "allPosts": [
      {
        "title": "vesti",
        "createdAt": "2020-04-05T12:37:09.451520+00:00",
        "content": "<p><strong>asdasda</strong></p>",
        "postImage": "post/logo.png",
        "postedBy": {
          "username": "filip"
        }
      },
      {
        "title": "asds",
        "createdAt": "2020-04-05T17:44:11.291829+00:00",
        "content": "<p>asdasd</p>",
        "postImage": "",
        "postedBy": {
          "username": "filip"
        }
      }
    ]

谢谢！

标签： reactjsgraphqlapollo

解决方案

Query 渲染道具功能

children传递给prop的 render prop 函数使用具有以下属性Query 的对象 ( ) 调用。QueryResult该对象包含您的查询结果，以及一些用于重新获取、动态轮询和分页的有用功能。

换句话说，render prop 是一个带有你需要的属性的 props 对象。该组件也只传递了一个参数。

整个props被分配给一个名为 的变量data，并且因为loading和error是未定义的，即错误的，这些条件测试失败并且您尝试呈现帖子。现在，data.allPosts或者真的props.allPosts不存在。

使用对象解构，您可以访问data、loading和errorprops。

function App() {
  return (
    <Query query={GET_POSTS_QUERY}>
      {({ data, loading, error }) => {
        if (loading) return <div>loading</div>
        if (error) return <div>error</div>

        return <ListPosts posts={data.allPosts} />

      }}
    </Query>
  )
}

推荐阅读