您可以从Next.js中的getStaticPaths中传递非字符串对象吗？

编程问答 2022-06-10

问题描述

很明显，如果调用它的文件名为 [slug]，则Next.js会强制您在slug内提供一个名为getStaticPaths()的 string 参数。 .js 。

但是，对于我来说，从getStaticPaths()传递整个对象而不是仅仅传递它很方便。

我正在尝试在我的 [slug] .js 文件中执行以下操作：

export default function Expression({ expression,definitions }) {
    return <div>{expression.expression}</div>
}

// Specify possible dynamic routes to pre-render.
export async function getStaticPaths() {
    const response = await fetch('http://127.0.0.1:8000/dictionary/expressions')
    const expressions = await response.json()
    const paths = expressions.map(expression => ({
        params: { expression: expression,slug: expression.slug }}))
    return { paths,fallback: false }
}

// Fetch definitions.
export async function getStaticProps({ params }) {
    const expression = params.expression
    const response = await fetch(
        `http://127.0.0.1:8000/dictionary/${expression.slug}`)
    const definitions = await response.json()
    return { props: { expression,definitions } }
}

我收到的错误来自fetch()的{​​{1}}调用，并说：

TypeError：无法读取未定义的属性'slug'

似乎Next.js拒绝getStaticProps()内部的任何不是“ slug”字符串的东西。有没有一种方法可以将名为我想要的名称的非字符串对象从params传递到getStaticPaths()？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

getstaticpathsgetstaticpropsreactjsreactjs