Ошибка: объекты недопустимы как дочерние элементы React (найдено: [обещание объекта]). Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив - PullRequest
0 голосов
/ 26 марта 2020

Итак, я изучаю React и очень хорошо знаю c веб-разработку с полным стеком, и я продолжаю выполнять это обещание, когда пытаюсь получить массив объектов в моем Mongodb. Через Почтальона я знаю, что он возвращает то, что я хочу [{}, {}, ...]. Но когда я пытаюсь использовать его в своем компоненте для сопоставления имен, я получаю

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

В моей веб-консоли мой список отображается как Обещание, но с массивом, который я хочу внутри него. Я продолжаю пробовать разные настройки с моим обещанием, как говорят многие посты здесь, чтобы заставить его решить, но все, что я пробовал, не меняет этого результата.

const ArticlesListPage = async () => {

    let testResult = function()
    {
        return fetch('/api/articles-list').then(result => {return result});
    };


    let results = testResult();
    results.then(function(res){
        console.log(res.json());
    })

}

export default ArticlesListPage;

И компонент:

const ArticlesList = ({articles}) => (

    <>
        {articles.map((article, key) => (
            <Link className="article-list-item" key={key} to={`/article/${article.name}`}>
                <h3>{article.title}</h3>
                <p>{article.content[0].substring(0,150)}...</p>
            </Link>
        ))}
    </>
);

export default ArticlesList;```

1 Ответ

0 голосов
/ 26 марта 2020

Это потому, что вы возвращаете Promise, а React Component может вернуть только JSX. Обратитесь к этой проблеме для получения подробной информации:

Почему размещение тега div позволяет компилировать этот код React?

Вот та часть, которая неверна, возвращаемая выборка:

return fetch('/api/articles-list').then(result => {return result});

Страница (потому что React Component) не может вернуть fetch

...