错误：查询（...）：渲染未返回任何内容。这通常意味着缺少return语句。或者，不渲染任何内容，则返回null

Question

我的React应用返回此错误：

错误：查询（...）：渲染未返回任何内容。这通常意味着缺少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模块必须返回另一个组件：

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

谢谢您的帮助：）

Answer 1

好吧，我自己找到解决方案。我将解决方案发布在这里，因为它可能会对某人有所帮助。

在我的cardContainer模块内部，缺少一些东西：您必须包装：

{articles.map((article) => {
   return (
        <ArticleCard article={article} key={`article__${article.id}`} />
   )
})}

带有return()