尝试从组件中访问 _id 道具。 Next.js, Mongodb, Mongoose答案

【问题标题】：Trying to access _id prop from within a component. Next.js, Mongodb, Mongoose尝试从组件中访问 _id 道具。 Next.js, Mongodb, Mongoose
【发布时间】：2022-09-24 07:12:29
【问题描述】：

我对 mongodb 和 mongoose 还是很陌生。在第一次使用 getServerSideProps 之后，我正在尝试使用 demo._id 访问 id 属性（_id）。它似乎在我的页面 pages/demo.js 上工作

页面/demos.js

import React from \'react\'
import Link from \'next/link\';
import dbConnect from \'../lib/dbConnect\'
import Demo from \'../models/Demo\'
// import Layout from \'../components/layout\'

const DemosPage = ({ demos }) => {
  return (
    <>
      {/* <Layout> */}
        <div>
          {demos.map((demo) => (
            <div key={demo._id}>
              <div className=\"card\">
                <img src={demo.image_url} />
                <div className=\"main-content\">
                  <p className=\"text-gray-900\"> {demo._id}</p>
                  <div className=\"btn-container\">
                    <Link href=\"/demos/[id]/edit\" as={`/demos/${demo._id}/edit`}>
                      <button className=\"btn edit\">Edit</button>
                    </Link>
                    <Link href=\"/demos/[id]\" as={`/demos/${demo._id}`}>
                      <button className=\"btn view\">View</button>
                    </Link>
                  </div>
                </div>
              </div>
              
            </div>
          ))}
        </div>
      {/* </Layout> */}
    </>
  )
}

export async function getServerSideProps() {

  await dbConnect()
  
  const result = await Demo.find({})
  const demos = result.map((doc) => {
    const demo = doc.toObject()
    demo._id = demo._id.toString()
    return demo
  })

  return { props: { demos: demos } }
}

export default DemosPage

我一直在努力从我的 API 处理程序函数以及我的组件中访问相同的 _id 属性，我不确定我在哪里搞砸了。下面是一个例子：

组件/NavItem.js

import React from \'react\'
import dbConnect from \'../lib/dbConnect\'
import Demo from \'../models/Demo\'
import Link from \'next/link\'

const NavItem = ({ demos }) => {
  return (
    <span key={index} className=\'block -ml-1.5\'>
      <div>
        {demos.map((demo) => (
          <Link key={demo._id} href=\"/demos/[id]\" as={`/demos/${demo._id}`}>
            <a>{demo._id}</a>
          </Link>
        ))}
      </div>
    </span>
  )
}

export async function getServerSideProps() {

  await dbConnect()
  
  const result = await Demo.find({})
  const demos = result.map((doc) => {
    const demo = doc.toObject()
    demo._id = demo._id.toString()
    return demo
  })

  return { props: { demos: demos } }
}

export default NavItem

我收到以下错误

Server Error

TypeError: Cannot read properties of undefined (reading \'map\')
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source

components/NavItem.js (10:15) @ NavItem

   8 | <span key={index} className=\'block -ml-1.5\'>
   9 |   <div>
> 10 |     {demos.map((demo) => (
     |           ^
  11 |       <Link key={demo._id} href=\"/demos/[id]\" as={`/demos/${demo._id}`}>
  12 |         <a>{demo._id}</a>
  13 |       </Link>

这是模型

import mongoose from \'mongoose\'

const DemoSchema = new mongoose.Schema({
  demo_variable: {
    type: Object,
  },
  demo_name: {
    type: String,
  },
})

export default mongoose.models.Demo || mongoose.model(\'Demo\', DemoSchema)

任何帮助将不胜感激！提前致谢...

标签： javascript node.js mongodb mongoose next.js

【解决方案1】：

getServerSideProps 不适用于非页面组件。它仅适用于页面文件。在components/NavItem.js getServerSideProps 从未被调用所以props.demos 是undefined

您必须在页面组件中调用getServerSideProps 并将其传递给带有道具钻孔的组件。

此外，您应该保护您的应用程序。如果“演示”存在，请使用.map

  {demos && demos.map((demo) => (

【讨论】：