NextJS 从组件中获取数据答案

【问题标题】：fetching data from component in NextJSNextJS 从组件中获取数据
【发布时间】：2021-04-10 21:58:50
【问题描述】：

您好，如果这个问题太基本，我很抱歉。但我最近开始学习 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>
  )
}

【问题讨论】：

names变量是否准确获取请求后的数据？
如果我在 index.js 文件中使用它。然后我可以取名字
我的意思是根据您的请求“const names = await prisma.name.findMany ()”数据可能不包含在 names 变量中。
你只需要返回 {names};不需要props 键
您可以尝试在getStaticProps 中记录names。可能是您从prisma 侧正确获取的问题

标签： javascript reactjs next.js

【解决方案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

【讨论】：