node.js - Next.js - GetStaticPaths 类型错误

Question

我对 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>
      )
    }

Answer 1

编辑:我在下面回答了错误的问题，但你还是应该看看那个。您收到该错误是因为 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>
      )
    }
    ```