如何在getStaticPaths

时间:2020-10-16 19:13:19

标签: javascript reactjs next.js server-side-rendering

当前,我正在开发一个应用程序,该应用程序需要使用以下URL预渲染页面: / challenge /:id /:activeState 我要做的第一件事是创建一个挑战文件夹在pages目录中。在文件夹中,我创建了一个[... slug] .tsx文件以捕获剩余的URL,到目前为止,效果很好,我可能有多个具有不同ID的页面,并且每个页面的状态不同,所以我这样做:

import React from 'react'
import ChallengeLayout from 'components/layouts/challenge-layout'
import useSWR from 'swr'
import { useRouter } from 'next/router'
import { ChallengeDescription } from 'components/challenge-description/challenge-description'
import { content } from 'data/description-content'

import { getProgram, getPrograms, programEndpoint, getStages } from 'api/api'

const getDataSwr = (endpoint, fetchMethod, initialData) => {
  const result = useSWR(endpoint, fetchMethod, { initialData: initialData })
  return result.data
}

const ChallengePage: any = ({ program }) => {
  const router = useRouter()

  const programData = getDataSwr(programEndpoint(router.query.slug[0]), getProgram, program)

  return (
    <ChallengeLayout program={programData}>
      <ChallengeDescription content={content} />
    </ChallengeLayout>
  )
}

export async function getStaticPaths() {
  const response: any = await getPrograms()

  const paths = response.results.map(async result => {
    const stagesResponse: any = await getStages(result.id)
    const stages = stagesResponse.map(stage => stage.id)
    return { params: { slug: result.id.toString(), another: 'asd' } }
  })

  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
  const res = await getProgram(params.slug)

  return { props: { program: res }, revalidate: 1 }
}

export default ChallengePage

代码的主要部分是:

export async function getStaticPaths() {
  const response: any = await getPrograms()

  const paths = response.results.map(async result => {
    const stagesResponse: any = await getStages(result.id)
    const stages = stagesResponse.map(stage => stage.id)
    return { params: { slug: result.id.toString(), ...stage.name } }
  })

  return { paths, fallback: false }
}

首先,我获得所有提取每个id的程序,因此基本上是基于程序显示一个页面,然后针对特定程序的每个阶段,我需要为每个阶段名称创建一个新页面。

对此有任何帮助吗?

当前我收到此错误:

未在数组中提供所需参数(段)作为数组 / challenge / [... slug]

的getStaticPaths

0 个答案:

没有答案