警告：失败的道具类型：道具`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)

我的想法是将 Queries 和 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-expressions

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

根据错误信息，您忘记在Queries.js 中为GetEvents 添加children 属性：

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