我对 Next.JS 的 getStaticPaths 有以下问题:
类型错误:cias.map 不是函数 /image/IVZDp.png
有人可以帮我解决这个问题吗?
代码:
import React from 'react'
import { Container } from '../../../styles/pages/container'
import { GetStaticProps, GetStaticPaths } from 'next'
import fetch from 'isomorphic-unfetch'
export const getStaticPaths: GetStaticPaths = async () => {
const res = await fetch('http://localhost:3000/api/infocadcias')
const cias = await res.json()
const paths = cias.map(cia => ({
params: { id: cia.ID.toString() }
}))
return { paths, fallback: false }
}
export const getStaticProps: GetStaticProps = async ({ params }) => {
const res = await fetch(`http://localhost:3000/infocadcias/${params.id}`)
const cia = await res.json()
return cia
}
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export default function InfoCia({ cia }) {
return (
<Container>
<ul>
{cia.map(p => (
<li className="cia" key={p.ID}>
<span>Name: {p.Name}</span>
</li>
))}
</ul>
</Container>
)
}
最佳答案
编辑:我在下面回答了错误的问题,但你还是应该看看那个。您收到该错误是因为 cias
不是数组。如果您仍然没有解决方案,请尝试记录该变量并使用结果更新您的问题。它可能类似于 {cias: [...]}
,在这种情况下,您需要将 map 更改为 cias.cias.map(...)
或在赋值时解构变量 const { cias } = await res.json()
在您的 getStaticProps
函数中,您没有以正确的格式返回。您需要返回一个带有 props
键的对象,如下所示:
{
props: {
cia: cia
}
}
您可以在此处引用有关 getStaticProps 的 NextJS 文档:https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation
如果这不能解决问题,您应该确保您的 await res.json()
正在返回一个数组。
带有更新的完整示例:
import React from 'react'
import { Container } from '../../../styles/pages/container'
import { GetStaticProps, GetStaticPaths } from 'next'
import fetch from 'isomorphic-unfetch'
export const getStaticPaths: GetStaticPaths = async () => {
const res = await fetch('http://localhost:3000/api/infocadcias')
const { cias } = await res.json()
const paths = cias.map(cia => ({
params: { id: cia.ID.toString() }
}))
return { paths, fallback: false }
}
export const getStaticProps: GetStaticProps = async ({ params }) => {
const res = await fetch(`http://localhost:3000/infocadcias/${params.id}`)
const { cia } = await res.json()
return {
props: {
cia: cia
}
}
}
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export default function InfoCia({ cia }) {
return (
<Container>
<ul>
{cia.map(p => (
<li className="cia" key={p.ID}>
<span>Name: {p.Name}</span>
</li>
))}
</ul>
</Container>
)
}
```
https://stackoverflow.com/questions/63801217/