Question

我正在学习Nextjs框架，并且在动态路由以及如何从数组中获取数据方面遇到困难。我遵循了Nextjs的基础知识，但这使我陷入困境。

我想要什么？

获取此数组的信息，该信息存储为items.tsx文件：

export const projects = [
  {
    id: '2',
    title: 'Italian recipes book',
    description: `This a web design and soon-to-be a fully functional and responsive React application` 
 },
  {
    id: '1',
    title: 'Chat App website',
    description: `This is a homepage design and build for a concept project – a chat application. I designed the page
    first then built a responsive web page using Webflow.`
  },
]

根据nextjs网站，我能够获取ID并创建了一个函数来获取项目数据，

import { projects } from "../models/projects";

export function getAllItemsIds() {
  return projects.map(project => {
    return {
      params: {
        id: project.id,
      }
    }
  })
}

export function getProjectData(id) {
  return {
    id,
  }
}

我相信函数getProjectData（id）会丢失其余的数据，而我在获取数据方面遇到了问题。我想根据参数（在本例中，ID为1或2）在[id] .tsx文件中显示数组的信息。这是我的[id] .tsx文件：


export async function getStaticPaths() {
  const paths = getAllItemsIds()
  return {
    paths,
    fallback: false
  }
}

export async function getStaticProps({ params }) {
  const projectData = getProjectData(params.id)
  return {
    props: {
      projectData
    }
  }
}



const Project = ({ projectData }) => {
  return (
    <>
      <div>
       {projectData.id}
       {projectData.title}
       {projectData.description}  
      </div>
      
      </>
  )
}

export default Project;

到目前为止，我只能显示我的projectData.id，我对所有的getStaticPaths（）和getStaticProps（）有点困惑。非常感谢您的帮助。

Answer 1

我不知道这样做是否正确，但是我设法做到了自己想要的事情：

添加了其他参数，并将数组映射到getProjectData内部

export function getProjectData(id, title, description ) {
  projects.map(data => {
    if (data.id === id) {
      title = data.title;
      description = data.description;
    }
  });
  return {
    id,
    title,
    description
  }
}

，然后在[id] .tsx中像这样更新getStaticProps

export async function getStaticProps({ params, title, description }) {
  const projectData = getProjectData(params.id, title, description)
  return {
    props: {
      projectData
    }
  }
}

它确实根据id参数获取了数据！

在nextjs中从数组中获取数据和动态路由显示

1 个答案: