无法映射 React 中的查询

Question

我将 Apollo 与 React 结合使用来映射查询，但出现类型错误：无法读取未定义的属性 'map'。

不知道是props传递的问题还是查询本身的问题...

我知道查询是由碎片组成的，但更改它并不能修复错误。

代码如下：

App.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"
        }
      }
    ]

谢谢！

Answer 1

import React from "react";

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

export default ListPosts;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React from "react";

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

export default ListPosts;

你能做这些改变吗？

Answer 2

1.您在 JSON 中的回复不是完整的 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"
        }
      }
    ]
  }
}

2。你发送的 data.allpost 不应该是驼峰式的，所以当你在 ListPost 中收到它作为道具时，你不应该将它包装在一个对象中应该是：

const ListPosts = (posts) => (...)

3。如果要映射对象，则必须通过 Object.entries() 或 Object.values() 访问对象内的数组，因此：

Object.entries(posts).map(postArray => (...)

将 return [帖子:, [array(2)]]

4.现在您可以访问该数组，您需要像这样映射它：

 postArray[1].map(post => {
 return(
  <div key={post.title}>
          <div style={{ borderStyle: "solid" }}>
            <h3>{post.title}</h3>
          </div>
          <div style={{ borderStyle: "solid", borderWidth: "2px" }}>
            <p>{post.createdAt}</p>
            <p>{post.content}</p>
            <p>{post.postImage}</p>
            <p>{post.postedBy.username}</p>
          </div>
  </div>
  )}

为了让您更好地理解，我创建了一个示例：https://codesandbox.io/s/component-drilling-props-grxm4

检查控制台您将能够看到日志

希望这对你有帮助，祝你好运！

Answer 3

Query Render prop function

The render prop function that you pass to the children prop of Query is called with an object (QueryResult) that has the following properties. This object contains your query result, plus some helpful functions for refetching, dynamic polling, and pagination.

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

整个 props 被分配给一个名为 data 的变量，并且因为 loading 和 error 是未定义的，即假的，那些条件测试失败了，你尝试渲染帖子。现在，data.allPosts 或实际上 props.allPosts 不存在。

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

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

无法映射 React 中的查询

Can't map over a query in React

apollo

reactjs

graphql