根据https://www.apollographql.com/
我有一个组件:
typeof<System.Byte>
据我了解,它应该仅在获取数据时呈现数据,否则应呈现const OrganizationsList = () => (
<Query
query={gql`
{searchOrganizations(count: 10, offset: 0)
{
id,
legalBusinessName,
shops {
shopId,
shopVersion,
organizationId,
sortIndex,
alternativeName
}
}
}
`}
>
{({ loading, error, data }) => {
if (loading) return <p>Loading...</p>
if (error) return <p>Error :(</p>
console.log(data.searchOrganizations)
return data.searchOrganizations.map((organization, index) => (
<div key={index}>
<p>{`${organization.id}: ${organization.legalBusinessName}`}</p>
</div>
))
}}
</Query>
)
class ListOrganizationsPage extends Component {
render() {
return (
<OrganizationsList />
)
}
}
。
然而,loading
被渲染,没有别的。
在控制台中,会记录数据,然后弹出此错误:
未捕获(在promise中)错误:Query.render():必须返回有效的React元素(或null)。您可能已经返回undefined,一个数组 或其他一些无效的对象。
我在这里缺少什么?
答案 0 :(得分:1)
是不是因为你返回一个数组而不是一个React元素。应该是
return (<div>
{
data.searchOrganizations.map((organization, index) => (
<div key={index}>
<p>{`${organization.id}: ${organization.legalBusinessName}`}</p>
</div>))}
</div>)