使用 getStaticProps 获取数据 Next.js 和 Typescript

Posted 2023-03-06

【中文标题】使用 getStaticProps 获取数据 Next.js 和 Typescript

【英文标题】：Fetching data Next.js and Typescript using getStaticProps

【发布时间】：2022-01-20 02:54:17

【问题描述】：

我正在使用 TypeScript 在 Next.js 上做一个个人项目。我正在尝试获取api，然后制作项目地图，但我无法使其工作。我做了一个console.log，它给出了未定义的。我确实将文件放在页面文件夹中。这是代码：

import  InferGetStaticPropsType  from 'next'

type Data = 
    id: string
    films: string
    people: string
    planets: string
    species: string
    vehicles: string
 

export const getStaticProps = async () => 
    const res = await fetch('https://www.swapi.tech/api/')
    const swapis: Data[] = await res.json()
  
    return 
        props: 
          swapis,
        ,
     

 
const FilmList = ( swapis : InferGetStaticPropsType<typeof getStaticProps>) => 
    console.log('swapis', swapis)
    return (
        <>
        <h2>List of Films</h2>
        swapis.map((swapi) => (
            <ul key=swapi.id>
                <li>swapi.films</li>
            </ul>
        ))
        </>
    );

 
export default FilmList;

【参考方案1】：

您的Data 类型错误。你打电话给https://www.swapi.tech/api/，它会返回

  "message": "ok",
  "result": 
    "films": "https://www.swapi.tech/api/films",
    "people": "https://www.swapi.tech/api/people",
    "planets": "https://www.swapi.tech/api/planets",
    "species": "https://www.swapi.tech/api/species",
    "starships": "https://www.swapi.tech/api/starships",
    "vehicles": "https://www.swapi.tech/api/vehicles"
  

完整的工作示例：

import  InferGetStaticPropsType  from 'next';

type Data = 
  message: string;
  result: 
    id: string;
    films: string;
    people: string;
    planets: string;
    species: string;
    vehicles: string;
  ;
;

export const getStaticProps = async () => 
  const res = await fetch('https://www.swapi.tech/api/');
  const swapis: Data = await res.json();

  return 
    props: 
      swapis,
    ,
  ;
;

const FilmList = ( swapis : InferGetStaticPropsType<typeof getStaticProps>) => 
  return (
    <>
      <h2>List of Films</h2>
      Object.entries(swapis.result).map(([key, value]) => (
        <ul key=key>
          <li>value</li>
        </ul>
      ))
    </>
  );
;

export default FilmList;

【讨论】：

感谢@Joris，但我在屏幕上收到此错误“TypeError: Cannot convert undefined or null to object”。屏幕上的错误在这里：“Object.entries(swapis.result).map(([key, value]) => ("

你能分享一个codeandbox和repo吗？我尝试了我的代码，它可以工作

我刚刚在沙盒上做了。这是链接：codesandbox.io/s/crazy-minsky-cy9rg

您没有像预期的那样使用 nextjs。您可能会阅读文档。您创建了/data 页面来显示数据。您可以通过它的url访问：cy9rg.sse.codesandbox.io/data不建议在另一个页面中导入页面。

工作示例codesandbox.io/s/ecstatic-forest-m3mjf?file=/pages/index.tsx