NextJS 从组件中获取数据

Question

嗨，如果这个问题太基本，我很抱歉。 但我最近开始学习 React 和 NextJS。 我正在创建简单的应用程序来获取一些数据并将其显示在主页上。 我的组件文件中有两个函数。 我在我的 index.js 中导入了该组件文件并将其用作合成。 错误说 map 正在返回未定义的数据。

 // Names.js Component export const getStaticProps = async () => { const prisma = new PrismaClient() const names = await prisma.name.findMany() return { props: { names } } } function Data({names}) { return ( <div> <ul> {names.map((namelist) => ( <li key={namelist.id}>{namelist.title}</li> ))} </ul> </div> ) } export default Data // Index.js export default function Home() { return( <div> <Names /> </div> ) }

Answer 1

getStaticProps只能从页面调用，不能从组件调用。 您需要将其移至Index.js （假设它位于/pages文件夹下）。

// Index.js
export default function Home({ names }) {
  return(
    <div>
      <Names names={names} />
    </div>
  )
}

export const getStaticProps = async () => {
  const prisma = new PrismaClient()
  const names = await prisma.name.findMany()

  return {
    props: {
      names
    }
  }
}

// Names.js Component
function Data({ names }) {
  return (
    <div>
      <ul>
        {names.map((namelist) => (
          <li key={namelist.id}>{namelist.title}</li>
        ))}
      </ul>
    </div>
  )
}

export default Data