Невозможно отобразить запрос в React - PullRequest
Новая
       2

Невозможно отобразить запрос в React

0 голосов
/ 05 апреля 2020

Я использую Apollo с React для сопоставления запроса, но получаю TypeError: Невозможно прочитать свойство 'map' из неопределенного.

Я не знаю, является ли проблема с передачей реквизита или запросом self ...

Я знаю, что запрос сделан из фрагментов, но изменение этой дозы не исправляет ошибку.

Вот код:

Приложение . 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"
        }
      }
    ]

Спасибо!

Ответы [ 3 ]

2 голосов
/ 05 апреля 2020

Query Функция поддержки рендеринга

Функция поддержки рендеринга, переданная в children опору Query, вызывается с объектом (QueryResult ), который имеет следующие свойства. Этот объект содержит результат вашего запроса, а также некоторые полезные функции для повторного получения, динамического опроса c и разбиения на страницы.

Другими словами, объект рендеринга - это объект 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>
  )
}
1 голос
/ 05 апреля 2020

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 => (...)

вернет [posts :, [ массив (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

Проверьте консоль, вы сможете увидеть журналы

надеюсь, это поможет вам удачи!

0 голосов
/ 05 апреля 2020 

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;

Вы можете сделать эти изменения?

...