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

【问题标题】：Error: Query(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null错误：查询（...）：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null
【发布时间】：2020-08-02 02:22:33
【问题描述】：

我的 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

感谢您的帮助:)

【问题讨论】：

标签： reactjs frontend react-apollo strapi

【解决方案1】：

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

在我的 cardContainer 模块内部缺少一些东西：你必须换行：

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

return()

【讨论】：