我正在使用next-offline制作PWA nextjs应用程序。但是,当我尝试构建它并按照文档中的说明将其导出时,它无法构建我的动态页面[id] .js。显示错误消息,例如:
在呈现页面“ / movies / [id]”时发生错误:TypeError:无法读取未定义的属性“地图”
有什么办法可以解决此问题。我想我需要在getInitialProps中做一些事情,因为这是执行数据提取的地方
import Link from "next/link";
import Head from "next/head";
import Oops from "../../components/Oops";
import Image from "../../components/Image";
import { getMovieDetails,getImageSrc } from "../../utils/apiCalls";
import Layout from "../../components/Layout";
const Movie = ({ title,poster_path,rating,overview,genres,cast,error }) =>
error ? (
<div classname="movie">
<Oops />
</div>
) : (
<Layout noOffline={true}>
<div classname="movie">
<Head>
<title>{title} | Movies PWA</title>
</Head>
<div classname="card">
<div classname="card-header">
<div classname="card-title h3 text-primary">{title}</div>
<div classname="card-subtitle text-gray">Rating - {rating}</div>
<div classname="chips">
{genres.map(({ id,name }) => (
<div key={id} classname="chip">
{name}
</div>
))}
</div>
</div>
<div classname="card-image">
<Image
src={getImageSrc(poster_path,500)}
alt={`Poster for ${title}`}
classname="img-responsive"
/>
</div>
<div classname="card-body">
<div classname="card-title h4">Overview</div>
<div classname="card-subtitle">{overview}</div>
<div classname="card-title h4">Cast</div>
<div classname="cast">
{cast.map(({ credit_id,profile_path,name }) =>
profile_path ? (
<figure
key={credit_id}
classname="avatar avatar-xl tooltip"
data-tooltip={name}
>
<Image src={getImageSrc(profile_path,92)} alt={name} />
</figure>
) : null
)}
</div>
</div>
<div classname="card-footer btn-group btn-group-block">
<Link href="/movies">
<a classname="btn btn-primary">Back to Movies</a>
</Link>
</div>
</div>
</div>
</Layout>
);
Movie.getInitialProps = async ({ query: { id } }) => {
const res = await getMovieDetails(id);
if (res.error || !res.original_title) return res;
const {
poster_path,credits: { cast },vote_average,original_title
} = res;
return {
title: original_title,rating: vote_average,cast: cast.filter((c,i) => i < 5)
};
};
export default Movie;
复制“静态构建”目录 发射3名工人 复制“公共”目录 [==]导出(1/6) 呈现页面“ / movies / [id]”时发生错误:TypeError:无法读取未定义的属性“地图”