Error: Query(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null
Error: Query(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null
我的 React 应用 return 这个错误:
Error: Query(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
我检查了我的每一行代码,但我不知道发生了什么..
这里是产生这个错误的模块:
import React from 'react'
import Query from '../../components/Query'
import ArticleCard from '../ArticleCard'
import ARTICLES_QUERY from '../../queries/article/articles'
export default function CardContainer() {
return (
<div className="wrapper">
<Query query={ARTICLES_QUERY}>
{({ data : { articles } }) => {
{articles.map((article) => {
return (
<ArticleCard article={article} key={`article__${article.id}`} />
)
})}
}}
</Query>
</div>
)
}
CardContainer 模块必须 return 另一个组件 :
import React from 'react'
//import {Link} from 'react-router-dom'
export default function CardContainer({article}) {
return (
<div className="arcticle_card">
<div className="article_card_content">
<div className="article_card_image">
<img src={process.env.REACT_APP_BACKEND_URL + article.image.url} alt={article.image.url}></img>
</div>
<div className="article_card_text">
<p className="categorie">{article.category.name}</p>
<h2>{article.title}</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div className="article_card_underline"></div>
</div>
)
}
最后是我的查询模块,错误接缝来自这里,但我不知道为什么:
import React from 'react'
import {useQuery} from '@apollo/react-hooks'
const Query = ({ children, query, id }) => {
const { data, loading, error } = useQuery(query, {
variables: { id: parseInt(id) }
})
if (loading) return (
<p>Loading ...</p>
)
if (error) return (
<p>Error: {JSON.stringify(error)}</p>
)
return children({ data })
}
export default Query
感谢您的帮助:)
好的,我自己找到了解决方案。我post这里的解决方案因为它可能对某人有帮助。
我的 cardContainer 模块内部缺少一些东西:
你必须包装 :
{articles.map((article) => {
return (
<ArticleCard article={article} key={`article__${article.id}`} />
)
})}
return()
我的 React 应用 return 这个错误:
Error: Query(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
我检查了我的每一行代码,但我不知道发生了什么..
这里是产生这个错误的模块:
import React from 'react'
import Query from '../../components/Query'
import ArticleCard from '../ArticleCard'
import ARTICLES_QUERY from '../../queries/article/articles'
export default function CardContainer() {
return (
<div className="wrapper">
<Query query={ARTICLES_QUERY}>
{({ data : { articles } }) => {
{articles.map((article) => {
return (
<ArticleCard article={article} key={`article__${article.id}`} />
)
})}
}}
</Query>
</div>
)
}
CardContainer 模块必须 return 另一个组件 :
import React from 'react'
//import {Link} from 'react-router-dom'
export default function CardContainer({article}) {
return (
<div className="arcticle_card">
<div className="article_card_content">
<div className="article_card_image">
<img src={process.env.REACT_APP_BACKEND_URL + article.image.url} alt={article.image.url}></img>
</div>
<div className="article_card_text">
<p className="categorie">{article.category.name}</p>
<h2>{article.title}</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div className="article_card_underline"></div>
</div>
)
}
最后是我的查询模块,错误接缝来自这里,但我不知道为什么:
import React from 'react'
import {useQuery} from '@apollo/react-hooks'
const Query = ({ children, query, id }) => {
const { data, loading, error } = useQuery(query, {
variables: { id: parseInt(id) }
})
if (loading) return (
<p>Loading ...</p>
)
if (error) return (
<p>Error: {JSON.stringify(error)}</p>
)
return children({ data })
}
export default Query
感谢您的帮助:)
好的,我自己找到了解决方案。我post这里的解决方案因为它可能对某人有帮助。
我的 cardContainer 模块内部缺少一些东西: 你必须包装 :
{articles.map((article) => {
return (
<ArticleCard article={article} key={`article__${article.id}`} />
)
})}
return()