使用 getStaticProps 获取数据 Next.js 和 Typescript
Fetching data Next.js and Typescript using getStaticProps
我正在使用 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;
您的 Data
类型有误。您正在调用 https://www.swapi.tech/api/ 哪个 returns
{
"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;
我正在使用 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;
您的 Data
类型有误。您正在调用 https://www.swapi.tech/api/ 哪个 returns
{
"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;