Ошибка: Запрос (...): ничего не было возвращено из рендера. Обычно это означает, что отсутствует инструкция возврата. Или, чтобы ничего не визуализировать, верните null - PullRequest
Новая
       36

Ошибка: Запрос (...): ничего не было возвращено из рендера. Обычно это означает, что отсутствует инструкция возврата. Или, чтобы ничего не визуализировать, верните null

0 голосов
/ 19 апреля 2020

Приложение My React возвращает эту ошибку:

Ошибка: Запрос (...): ничего не было возвращено при рендеринге. Обычно это означает, что отсутствует инструкция возврата. Или, чтобы ничего не отобразить, верните 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>
    )
}

И, наконец, вот мой модуль Query, швы с ошибками будут поступать отсюда, но я не знаю почему: 

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

Спасибо за помощь :)

1 Ответ

0 голосов
/ 19 апреля 2020

Хорошо, я сам нашел решение. Я опубликую решение здесь, потому что оно может кому-то помочь.

Внутри моего модуля cardContainer чего-то не хватает: Вы должны обернуть: 

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

с return()

...