一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

如何正确地在Next页面组件之间传递Props?

起因

最近在写 Next (v14 App Router)时,发现运行 next build 出现了以下错误:

Linting and checking validity of types ...Failed compile.
"src/app/home/updatelog/bugfix/page.tsx" has an invalid "default" export: Type "{ type: number; }" is not valid.

查看报错是在 Next 进行类型检查时出现的,根据给出的文件路径查看相关文件:

// updatelog/bugfix/page.tsx

export default function BugFixPage({ type }: { type: number }) {
  return <div>...</div>;
}

发现组件定义并没有错,而且传入的参数的类型也没写错。

但报错却出现了 export: Type "{ type: number; }" is not valid. ,试着取消传递参数,再重新 build 时,发现就没报错了。

在其父文件中,是这样定义的:

// updatelog/page.tsx

export default function UpdateLogPage() {
  const [updatePage, setUpdatePage] = useState<string>("/home/updatelog/newfeature")

  const renderContent = () => {
    switch (updatePage) {
      // 这样的做法是错误的❌
      case "/home/updateLog/newfeature":
        return <NewFeature type={0} />;
      case "/home/updateLog/bugfix":
        return <BugFixPage type={1} />;
      default:
        break;
    }
  }

  ...
}

溯源

由于 Next 的路由是基于文件系统的,也就是说每个页面都是一个单独的组件文件,当然这里说的”每个页面”指的是在 pages 目录下或者 app 目录下的页面。正是由于这样的特点,Next 就不能像传统的 SPA 应用一样在组件之间传递 Props 了。但这并不是说 Next 的页面组件不能接受参数,它可以接受参数,但并不能像 SPA 应用一样可以接收从另一个组件传递过来的参数。

要在 Next 中的页面之间传递属性,可以通过 getStaticPropsgetServerSidePropsfetch 等数据获取方法

getStaticProps

仅限 Pages Router 模式下才能使用

如果需要在构建时使用 Props,则可以使用 getStaticProps 方法,它是在构建时运行的服务端函数,并返回一个对象,该对象作为 Props 传递给组件。

import type { GetStaticProps } from "next";

export const getStaticProps: GetStaticProps = async (context) => {
  const res = await fetchAPI("...");

  return {
    props: {
      result: res.data,
    },
  };
};

export default function ResultPage({ result }) {
  return (
    <div>
      {result.map((item) => {
        <div key={item.id}>{item}</div>;
      })}
    </div>
  );
}

getServerSideProps

仅限 Pages Router 模式下才能使用

如果需要在请求时使用 Props,可以使用 getServerSideProps 方法,它也是一个服务端函数,但会针对每个请求运行。

import type { GetServerSideProps } from "next";

export const getServerSideProps: GetServerSideProps = async () => {
  const res = await fetchAPI("...");

  return {
    props: {
      result: res.data,
    },
  };
};

export default function ResultPage({ result }) {
  return (
    <div>
      {result.map((item) => {
        <div key={item.id}>{item}</div>;
      })}
    </div>
  );
}

fetch

在 App Router 模式下,可以直接 fetch 来获取数据

Next 扩展了原生的 fetch Web API ,额外添加了 配置缓存重新验证行为

可以在 服务器组件(Server Component)路由处理程序(页面目录的API路由)服务器操作(Server Action,在服务器上执行的异步函数)

async function getData() {
  const res = await fetch("...", {
    // 配置缓存
    cache: 'force-cache',
    // 重新验证行为
    next: {
      revalidate: 3600
    },
  })

  return res.json()
}

export default async function FetchPage() {
  const data = await getData()

  return (
    <div>
      {data.map(i => {
        <div key={i}>{i}</div>
      })}
    </div>
  )
}

希望给遇到同样错误的同学一个思路。

原文链接:https://juejin.cn/post/7317132381013065738 作者:Licodeao

(0)
上一篇 2023年12月27日 下午4:05
下一篇 2023年12月27日 下午4:16

相关推荐

发表评论

登录后才能评论