javascript - 警告:失败的道具类型:道具“孩子”在“查询”中被标记为必需,但其值为“未定义”
问题描述
我在发布数据时遇到数据未显示的问题。我收到以下警告:
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;
解决方案
根据错误消息,您忘记为in添加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>
)
}
推荐阅读
- python - Linux 找不到指定路径
- forms - Drupal 8 中的自定义表单字段
- javascript - 将 post 数据从 javascript 发送到 python 服务器
- python - VPython:如何修复“NameError:名称'__server'未定义”?
- c# - 如何根据其他 ViewModel 中设置的设置动态更新一个 ViewModel 中的属性?
- java - 列表视图中的滚动条
- java - 如果需要用户输入整数,如何处理无效输入?
- javascript - 特征表关系
- react-native - 使用 Turtle CLI“未从打包程序加载捆绑包”构建独立 Expo .apk
- c++ - 将二叉搜索树转换为模板类