reactjs 错误:所需参数(username)未在getStaticPaths中作为字符串提供

h5qlskok  于 2023-02-08  发布在  React
关注(0)|答案(1)|浏览(128)

Nextjs,Directus和Algolia建立一个驱动程序页面,你可以点击他们的个人资料,看到他们的信息。要看到别人的信息链接将是http://localhost:3000/drivers/username-没有什么太花哨。我的问题是,当我点击一个链接,我得到错误:一个必需的参数(用户名)没有在getStaticPaths中作为字符串提供用户名 * 是一个字符串,所以我不明白。任何指示将不胜感激。谢谢。

let config = {
  headers: {
    "authorization": 'Bearer xxx'
  }
}

export async function getStaticPaths() {

  const username = await fetch(`https://xxx.directus.app/users`,config).then(res => res.json());

  const paths = [username.data].map((driver) => ({
    params: {
      username: driver.username
    },
  }))

  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {

  const results = await fetch(`https://xxx.directus.app/users/?fields=username&[username][_eq]=${params.username}`, config).then(res => res.json());
  return {
    props: {
      results
    },
  }
}

export default function Driver({ results }) {

  return (
    `<div>
      <h1>{results.data[0].username}</h1>
    </div>`
  )
}
bhmjp9jg

bhmjp9jg1#

这里username.data很可能已经是一个array,所以你不需要把它转换成数组,否则你会得到paths[ { params: { username: undefined } } ],因为[username.data]仅包含一个元素username.data,并且后者没有property用户名,因为它是一个数组,所以返回的用户名将是undefined

const paths = username.data.map((driver) => ({
  params: {
    username: driver.username
  },
}))

相关问题