Предупреждение: Ошибка типа проп: Прописка `children` помечена как обязательная в` Query`, но ее значение равно `undefined`

Question

У меня проблема с тем, что мои данные не отображаются при публикации данных.Я получаю следующее предупреждение:

index.js:1437 Warning: Failed prop type: The prop `children` is marked as required in `Query`, but its value is `undefined`.
    in Query (at Queries.js:7)
    in GetEvents (at GetAllEvents1.js:8)
    in GetAllEvents1 (at Events.js:11)
    in div (at Events.js:9)
    in Events (created by Context.Consumer)
    in Route (at AppRouter.js:24)
    in Switch (at AppRouter.js:21)
    in div (at AppRouter.js:14)
    in Router (created by BrowserRouter)
    in BrowserRouter (at AppRouter.js:13)
    in AppRouter (at App.js:34)
    in ApolloProvider (at App.js:33)
    in div (at App.js:32)
    in App (at src/index.js:10)

Моя идея заключалась в том, чтобы разделить запросы и класс GetAllEvents1.Если у меня есть эти два в одном классе, это работает, но когда у меня нет, это не.

Это следующий код, который у меня есть.

Ниже приведен класс GetAllEvents1:

import React from 'react';
import EventItem from './EventItem';
import {GetEvents} from './Queries';


function GetAllEvents1() {
    return(
    <GetEvents>
        {({loading, error, data})=> {
            if(loading) return <h1>Loading</h1>
            if(error) return <h1>Something went wrong, are you logged in?</h1>
            console.log(data.getAllEvents)
            return data.getAllEvents.map ((event) => (
                    <div key={event.id}>
                        <h1>Availaible events</h1>
                        <EventItem 
                        id={event.id} 
                        startDate={event.startDate} 
                        startTime={event.startTime} 
                        gps={event.gps} 
                        radius={event.radius} 
                        minAge={event.minAge} 
                        maxAge={event.maxAge}
                        gender={event.gender} 
                        runningPace={event.runningPace}
                        distance={event.distance}
                        />
                    </div>
                ))
            ;
        }}
    </GetEvents>
    )
    }
export default GetAllEvents1;

Это другой класс, Запросы:

import React from'react';
import gql from 'graphql-tag';
import {Query} from 'react-apollo';

export const GetEvents = () => {
    return (
    <Query query={gql`
        {
            getAllEvents {
                id
                startDate
                startTime
                gps
                radius
                minAge
                maxAge
                gender
                runningPace
                distance
            }
        }
    `}>
    </Query> 
    )
}

Этот следующий класс - оба.Этот класс работает.Обратите внимание, что единственное различие между этими двумя кодами состоит в том, что я окружил два предыдущих класса операторами возврата.Если я не получаю, я получаю следующую ошибку:

. / Src / components / events / GetAllEvents1.js Строка 8: ожидался вызов присваивания или функции, и вместо этого он видел выражение no-unused-expressionions

import React from 'react';
import {Query} from 'react-apollo';
import gql from 'graphql-tag';
import EventItem from './EventItem';

const GetAllEvents = () => (
    <Query query={gql`
        {
            getAllEvents {
                id
                startDate
                startTime
                gps
                radius
                minAge
                maxAge
                gender
                runningPace
                distance
            }
        }
    `}>
        {({loading, error, data})=> {
            if(loading) return <h1>Loading</h1>
            if(error) return <h1>Something went wrong, are you logged in?</h1>
            console.log(data.getAllEvents)

            return data.getAllEvents.map ((event) => (
                    <div key={event.id}>
                        <h1>Availaible events</h1>
                        <EventItem 
                        id={event.id} 
                        startDate={event.startDate} 
                        startTime={event.startTime} 
                        gps={event.gps} 
                        radius={event.radius} 
                        minAge={event.minAge} 
                        maxAge={event.maxAge}
                        gender={event.gender} 
                        runningPace={event.runningPace} 
                        distance={event.distance}
                        />
                    </div>
                ))

            ;

        }}
    </Query>
);
export default GetAllEvents;

Answer 1

На основании сообщения об ошибке вы забыли добавить children реквизит для GetEvents в Queries.js:

import React from'react';
import gql from 'graphql-tag';
import {Query} from 'react-apollo';

export const GetEvents = ({children}) => {
    return (
    <Query query={gql`
        {
            getAllEvents {
                id
                startDate
                startTime
                gps
                radius
                minAge
                maxAge
                gender
                runningPace
                distance
            }
        }
    `}>
     {children} // here 
    </Query> 
    )
}