反应 Apollo 客户端查询抛出错误 "Invalid prop `children` of type `array` supplied to `Query`, expected `function`"
React Apollo Client Query throwing error "Invalid prop `children` of type `array` supplied to `Query`, expected `function`"
我正在做一个 React JS 项目。我的应用需要使用 GraphQL API。所以我为此使用了 Apollo 客户端。当我将 Query 组件与 ApolloProvider 组件一起使用时，它会抛出错误。以下是我的代码。
这是我的app.js
import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
import AdminLayout from "./layouts/Admin";
import { ApolloProvider } from '@apollo/react-hooks';
import ApolloClient, { gql } from 'apollo-boost';
const client = new ApolloClient({
uri: 'https://48p1r2roz4.sse.codesandbox.io',
});
const hist = createBrowserHistory();
ReactDOM.render(
<ApolloProvider client={client}>
<HashRouter history={hist}>
<Switch>
<Route path="/admin" render={(props) => <AdminLayout {...props} />} />
<Redirect to="/admin/dashboard" />
</Switch>
</HashRouter>
</ApolloProvider>,
document.getElementById("app")
);
如您所见，我声明了 Apollo 客户端并将其分配给 ApolloProvider 组件的客户端属性。
我有一个名为 RestaurantForm 的组件，它使用如下 GraphQL 查询组件。
import React from 'react';
import {Button, Card, CardBody, CardFooter, CardHeader, CardTitle, Col, Form, FormGroup, Input, Row} from "reactstrap";
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
const EXCHANGE_RATES_QUERY = gql`
{
rates(currency: "USD") {
currency
rate
}
}
`;
class RestaurantForm extends React.Component {
render() {
return (
<Query query={EXCHANGE_RATES_QUERY}>
{({ data }) => {
<>
<div className="content">
<Row>
<Col md="4">
<Card className="card-user">
<div className="image">
<img
alt="..."
src={"assets/paper-dashboard/img/damir-bosnjak.jpg"}
/>
</div>
<CardBody>
<div className="author">
<a href="#pablo" onClick={(e) => e.preventDefault()}>
<img
alt="..."
className="avatar border-gray"
src={"assets/paper-dashboard/img/mike.jpg"}
/>
<h5 className="title">Chet Faker</h5>
</a>
<p className="description">@chetfaker</p>
</div>
<p className="description text-center">
"I like the way you work it <br />
No diggity <br />I wanna bag it up"
</p>
</CardBody>
<CardFooter>
<hr />
<div className="button-container">
<Row>
<Col className="ml-auto" lg="3" md="6" xs="6">
<h5>
12 <br />
<small>Files</small>
</h5>
</Col>
<Col className="ml-auto mr-auto" lg="4" md="6" xs="6">
<h5>
2GB <br />
<small>Used</small>
</h5>
</Col>
<Col className="mr-auto" lg="3">
<h5>
24,6$ <br />
<small>Spent</small>
</h5>
</Col>
</Row>
</div>
</CardFooter>
</Card>
</Col>
<Col md="8">
<Card className="card-user">
<CardHeader>
<CardTitle tag="h5">Edit Profile</CardTitle>
</CardHeader>
<CardBody>
<Form>
<Row>
<Col className="pr-1" md="5">
<FormGroup>
<label>Company (disabled)</label>
<Input
defaultValue="Creative Code Inc."
disabled
placeholder="Company"
type="text"
/>
</FormGroup>
</Col>
<Col className="px-1" md="3">
<FormGroup>
<label>Username</label>
<Input
defaultValue="michael23"
placeholder="Username"
type="text"
/>
</FormGroup>
</Col>
<Col className="pl-1" md="4">
<FormGroup>
<label htmlFor="exampleInputEmail1">
Email address
</label>
<Input placeholder="Email" type="email" />
</FormGroup>
</Col>
</Row>
<Row>
<Col className="pr-1" md="6">
<FormGroup>
<label>First Name</label>
<Input
defaultValue="Chet"
placeholder="Company"
type="text"
/>
</FormGroup>
</Col>
<Col className="pl-1" md="6">
<FormGroup>
<label>Last Name</label>
<Input
defaultValue="Faker"
placeholder="Last Name"
type="text"
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col md="12">
<FormGroup>
<label>Address</label>
<Input
defaultValue="Melbourne, Australia"
placeholder="Home Address"
type="text"
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col className="pr-1" md="4">
<FormGroup>
<label>City</label>
<Input
defaultValue="Melbourne"
placeholder="City"
type="text"
/>
</FormGroup>
</Col>
<Col className="px-1" md="4">
<FormGroup>
<label>Country</label>
<Input
defaultValue="Australia"
placeholder="Country"
type="text"
/>
</FormGroup>
</Col>
<Col className="pl-1" md="4">
<FormGroup>
<label>Postal Code</label>
<Input placeholder="ZIP Code" type="number" />
</FormGroup>
</Col>
</Row>
<Row>
<Col md="12">
<FormGroup>
<label>About Me</label>
<Input
type="textarea"
defaultValue="Oh so, your weak rhyme You doubt I'll bother, reading into it"
/>
</FormGroup>
</Col>
</Row>
<Row>
<div className="update ml-auto mr-auto">
<Button
className="btn-round"
color="primary"
type="submit"
>
Update Profile
</Button>
</div>
</Row>
</Form>
</CardBody>
</Card>
</Col>
</Row>
</div>
</>
}}
{ null }
</Query>
)
}
}
export default RestaurantForm;
当我 运行 我的应用程序转到 RestaurantForm 组件页面时，出现以下错误。
app.js:66453 Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `Query`, expected `function`.
in Query (created by RestaurantForm)
in RestaurantForm (created by Context.Consumer)
in Route (created by Dashboard)
in Switch (created by Dashboard)
in div (created by Dashboard)
in div (created by Dashboard)
in Dashboard (created by Context.Consumer)
in Route
in Switch
in ApolloProvider
in Router (created by HashRouter)
in HashRouter
如果我只是在 RestaurantForm 组件中实例化客户端并在 componentDidMount 挂钩中查询它，问题是没有使用 Query 组件和 ApolloProvider 组件，它正在工作。但是我需要使用 ApolloProvider 和 Query 组件。我的代码有什么问题，我该如何解决？
该错误通常表示 Query 中的内容格式错误。
这是一个posthttps://github.com/apollographql/react-apollo/issues/2050
也许您有额外的逗号，或者即使没有 Query.
您的代码也无法正常工作
上面的 Query 组件有两个子组件：
- 一个函数：
{({ data }) => {...}
- 空：
{ null }
删除 { null } 以便您只传递一个子项（函数）来解决错误。
回调也需要return
{({ data }) => {
return (
//here are your components
)
}}
我正在做一个 React JS 项目。我的应用需要使用 GraphQL API。所以我为此使用了 Apollo 客户端。当我将 Query 组件与 ApolloProvider 组件一起使用时，它会抛出错误。以下是我的代码。
这是我的app.js
import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
import AdminLayout from "./layouts/Admin";
import { ApolloProvider } from '@apollo/react-hooks';
import ApolloClient, { gql } from 'apollo-boost';
const client = new ApolloClient({
uri: 'https://48p1r2roz4.sse.codesandbox.io',
});
const hist = createBrowserHistory();
ReactDOM.render(
<ApolloProvider client={client}>
<HashRouter history={hist}>
<Switch>
<Route path="/admin" render={(props) => <AdminLayout {...props} />} />
<Redirect to="/admin/dashboard" />
</Switch>
</HashRouter>
</ApolloProvider>,
document.getElementById("app")
);
如您所见，我声明了 Apollo 客户端并将其分配给 ApolloProvider 组件的客户端属性。
我有一个名为 RestaurantForm 的组件，它使用如下 GraphQL 查询组件。
import React from 'react';
import {Button, Card, CardBody, CardFooter, CardHeader, CardTitle, Col, Form, FormGroup, Input, Row} from "reactstrap";
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
const EXCHANGE_RATES_QUERY = gql`
{
rates(currency: "USD") {
currency
rate
}
}
`;
class RestaurantForm extends React.Component {
render() {
return (
<Query query={EXCHANGE_RATES_QUERY}>
{({ data }) => {
<>
<div className="content">
<Row>
<Col md="4">
<Card className="card-user">
<div className="image">
<img
alt="..."
src={"assets/paper-dashboard/img/damir-bosnjak.jpg"}
/>
</div>
<CardBody>
<div className="author">
<a href="#pablo" onClick={(e) => e.preventDefault()}>
<img
alt="..."
className="avatar border-gray"
src={"assets/paper-dashboard/img/mike.jpg"}
/>
<h5 className="title">Chet Faker</h5>
</a>
<p className="description">@chetfaker</p>
</div>
<p className="description text-center">
"I like the way you work it <br />
No diggity <br />I wanna bag it up"
</p>
</CardBody>
<CardFooter>
<hr />
<div className="button-container">
<Row>
<Col className="ml-auto" lg="3" md="6" xs="6">
<h5>
12 <br />
<small>Files</small>
</h5>
</Col>
<Col className="ml-auto mr-auto" lg="4" md="6" xs="6">
<h5>
2GB <br />
<small>Used</small>
</h5>
</Col>
<Col className="mr-auto" lg="3">
<h5>
24,6$ <br />
<small>Spent</small>
</h5>
</Col>
</Row>
</div>
</CardFooter>
</Card>
</Col>
<Col md="8">
<Card className="card-user">
<CardHeader>
<CardTitle tag="h5">Edit Profile</CardTitle>
</CardHeader>
<CardBody>
<Form>
<Row>
<Col className="pr-1" md="5">
<FormGroup>
<label>Company (disabled)</label>
<Input
defaultValue="Creative Code Inc."
disabled
placeholder="Company"
type="text"
/>
</FormGroup>
</Col>
<Col className="px-1" md="3">
<FormGroup>
<label>Username</label>
<Input
defaultValue="michael23"
placeholder="Username"
type="text"
/>
</FormGroup>
</Col>
<Col className="pl-1" md="4">
<FormGroup>
<label htmlFor="exampleInputEmail1">
Email address
</label>
<Input placeholder="Email" type="email" />
</FormGroup>
</Col>
</Row>
<Row>
<Col className="pr-1" md="6">
<FormGroup>
<label>First Name</label>
<Input
defaultValue="Chet"
placeholder="Company"
type="text"
/>
</FormGroup>
</Col>
<Col className="pl-1" md="6">
<FormGroup>
<label>Last Name</label>
<Input
defaultValue="Faker"
placeholder="Last Name"
type="text"
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col md="12">
<FormGroup>
<label>Address</label>
<Input
defaultValue="Melbourne, Australia"
placeholder="Home Address"
type="text"
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col className="pr-1" md="4">
<FormGroup>
<label>City</label>
<Input
defaultValue="Melbourne"
placeholder="City"
type="text"
/>
</FormGroup>
</Col>
<Col className="px-1" md="4">
<FormGroup>
<label>Country</label>
<Input
defaultValue="Australia"
placeholder="Country"
type="text"
/>
</FormGroup>
</Col>
<Col className="pl-1" md="4">
<FormGroup>
<label>Postal Code</label>
<Input placeholder="ZIP Code" type="number" />
</FormGroup>
</Col>
</Row>
<Row>
<Col md="12">
<FormGroup>
<label>About Me</label>
<Input
type="textarea"
defaultValue="Oh so, your weak rhyme You doubt I'll bother, reading into it"
/>
</FormGroup>
</Col>
</Row>
<Row>
<div className="update ml-auto mr-auto">
<Button
className="btn-round"
color="primary"
type="submit"
>
Update Profile
</Button>
</div>
</Row>
</Form>
</CardBody>
</Card>
</Col>
</Row>
</div>
</>
}}
{ null }
</Query>
)
}
}
export default RestaurantForm;
当我 运行 我的应用程序转到 RestaurantForm 组件页面时，出现以下错误。
app.js:66453 Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `Query`, expected `function`.
in Query (created by RestaurantForm)
in RestaurantForm (created by Context.Consumer)
in Route (created by Dashboard)
in Switch (created by Dashboard)
in div (created by Dashboard)
in div (created by Dashboard)
in Dashboard (created by Context.Consumer)
in Route
in Switch
in ApolloProvider
in Router (created by HashRouter)
in HashRouter
如果我只是在 RestaurantForm 组件中实例化客户端并在 componentDidMount 挂钩中查询它，问题是没有使用 Query 组件和 ApolloProvider 组件，它正在工作。但是我需要使用 ApolloProvider 和 Query 组件。我的代码有什么问题，我该如何解决？
该错误通常表示 Query 中的内容格式错误。
这是一个posthttps://github.com/apollographql/react-apollo/issues/2050
也许您有额外的逗号，或者即使没有 Query.
上面的 Query 组件有两个子组件：
- 一个函数：
{({ data }) => {...} - 空：
{ null }
删除 { null } 以便您只传递一个子项（函数）来解决错误。
回调也需要return
{({ data }) => {
return (
//here are your components
)
}}