时间戳

首页 > 解决方案 > 错误：对象作为 React 子项无效（找到：[object Promise]）。如果您打算渲染一组孩子，请改用数组

javascript - 错误：对象作为 React 子项无效（找到：[object Promise]）。如果您打算渲染一组孩子，请改用数组

问题描述

所以我正在学习 React 和非常基本的全栈 Web 开发，当我试图在我的 Mongodb 中获取一组对象时，我一直在兑现这个承诺。通过 Postman，我知道它正在返回我想要的 [{},{},...]。但是当我尝试在我的组件中使用它来映射我不断得到的名称时

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.

在我的 Web 控制台上，我的列表显示为 Promise，但其中包含我想要的数组。我一直在用我的承诺尝试不同的设置，就像这里的许多帖子所说的那样，以解决它，但我尝试过的一切都不会改变这个结果。

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;```

标签： javascriptreactjsmongodbpromisees6-promise

解决方案

这是因为您正在返回 aPromise并且 aReact Component只能返回 JSX。有关详细信息，请参阅此问题：

为什么放置一个 div 标签允许这个 React 代码编译？

这是错误的部分，获取返回：

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

页面（因为是 a React Component）不能返回 afetch

推荐阅读