下一离线无法建立动态路由

我正在使用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:无法读取未定义的属性“地图”

xichenhuahua 回答:下一离线无法建立动态路由

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3140028.html

大家都在问