警告：失败的道具类型：道具`children`在`Query`中被标记为必需，但它的值是`undefined`

Posted 2023-03-08

【中文标题】警告：失败的道具类型：道具`children`在`Query`中被标记为必需，但它的值是`undefined`

【英文标题】：Warning: Failed prop type: The prop `children` is marked as required in `Query`, but its value is `undefined`

【发布时间】：2020-01-26 11:37:43

【问题描述】：

我有一个问题，即我发布数据时没有显示我的数据。我收到以下警告：

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;

【参考方案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> 
    )