对象作为 React 子对象无效（找到：[object Promise]）。如果您打算渲染子集合，请改用数组。ReactJS

Question

对象作为 React 子对象无效（找到：[object Promise]）。如果您打算渲染子集合，请改用数组。ReactJS

“/pages/blog/index.js”中的代码：

import BlogComponents from "../../components/Blog/blogComponents";
import { listBlogs } from "../../server/mongodb";

const index = async (props) => {
  console.log(props)
  return (
    <div>
      <Head>
        <title>BLOG TITLE</title>
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta httpEquiv="Content-Type" content="text/html;charset=UTF-8" />
      </Head>
      <h1>BLOG HEADER</h1>
      <BlogComponents />
    </div>
  );
};

export async function getServerSideProps() {
  var blogs = await listBlogs();
  try {
    return {
      props: { blogs }
    }
  }
  catch (error) {
    console.log(error);
  }
}
export default index;

Run Code Online (Sandbox Code Playgroud)

“../../server/mongodb.js”中的代码：

import mongoose from "mongoose";
// URI for mongodb
const uri = process.env.MONGODB_URI
const options = { useNewUrlParser: true, useUnifiedTopology: true }

// Mongoose Client Promise
mongoose.connect(uri, options)
import {Blog} from "./mongooseModels/blogModel";

export async function listBlogs() {
    let blogs = await Blog.find().lean();
    //console.log(JSON.stringify(blogs));
    
  return JSON.stringify(blogs);

}

Run Code Online (Sandbox Code Playgroud)

最终目标是获取所有博客文章及其属性并将它们集成到react/nextjs 组件中。index.js 中“props”参数的 console.log 返回：

{
  blogs: `[{"_id":"HEXID","title":"Blog Title","author":"ME","date":{"day":"27","month":"January","year":"2021"},"image":"/images/image.jpg","alt":"image alt","summary":"blog summary","content":["blog content "]},{"_id":"61f8c1953907a8bef3dcb4ff","title":"Blog Title 2","author":"ME","date":{"day":"27","month":"January","year":"2021"},"image":"/images/image.jpg","alt":"image alt","summary":"blog summary","content":["blog content"]}]`
}

Run Code Online (Sandbox Code Playgroud)

当前错误是：错误 - 错误：对象作为 React 子对象无效（找到：[object Promise]）。如果您打算渲染子集合，请改用数组。但是页面能够接收从 getServerSideProps() 返回的数据

** 编辑/解决方案 ** 想通了...错误不是来自 getServerSideProps() 中的 return 语句。相反，它来自组件。在准备连接到数据库时，我向组件添加了“异步”，该组件又开始抛出错误。令人失望的是 NextJS 不会告诉您返回的错误中的“承诺”来自哪里。

Answer 1

Dre*_*ese 6

不应声明您的索引博客组件async。React 函数组件是纯粹的同步函数。

const index = async (props) => { // <-- implicitly returns Promise object
  console.log(props)
  return (
    <div>
      <Head>
        <title>BLOG TITLE</title>
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta httpEquiv="Content-Type" content="text/html;charset=UTF-8" />
      </Head>
      <h1>BLOG HEADER</h1>
      <BlogComponents />
    </div>
  );
};

export default index; // <-- implicitly returned Promise object

Run Code Online (Sandbox Code Playgroud)

该组件应该具有同步功能。

const index = (props) => { 
  useEffect(() => {
    console.log(props);
  }, [props]);
  
  return (
    <div>
      <Head>
        <title>BLOG TITLE</title>
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta httpEquiv="Content-Type" content="text/html;charset=UTF-8" />
      </Head>
      <h1>BLOG HEADER</h1>
      <BlogComponents />
    </div>
  );
};

Run Code Online (Sandbox Code Playgroud)

我编辑了我的问题以包含答案。我猜想“承诺”不是来自 getServerSideProps() 中的 return 语句。由于我向 BlogComponents 组件添加“async”，它反而引发了错误。删除异步后，页面将按预期加载。感谢您的帮助，指出 React 组件应该是同步的，帮助很大。我实际上已经断断续续地工作了一个星期...... (2认同)

归档时间：	4 年，6 月前
查看次数：	9273 次
最近记录：	3 年，2 月前