0

我想将组件中的道具传递给 getServerSideProps()。他们都在同一页上。下面的代码我想将 url 从我的组件传递给 getServerSideProps() 以便我可以使用相同的 url 从 API 获取数据。

export default function Home({data}) {
  
  const [number, getNumber] = useState("9999999999")
  const url =`{http://apilayer.net/api/validate?access_key=e52d69f119348057d68ec090d2d10978&number=${number}}`;

  return (
    <div>
      <Head>
        <title>Numverify</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <div className="h-16 dark:bg-gray-900 bg-white shadow-md flex justify-center items-center">
          <span className="text-gradient font-bold text-xl">NumVerify</span>
        </div>
      </main>
    </div>
  )
}

export async function getServerSideProps() {
  const res = await fetch(url);
  const data = await res.json();

  return {
    props: {
      data,
    }
  }
}
4

1 回答 1

0

你似乎误解了什么getServerSideProps。

文档状态：

如果您从页面导出名为 getServerSideProps 的异步函数，Next.js 将使用 getServerSideProps 返回的数据在每个请求上预渲染此页面。

因此，您返回的数据将被传递给您的Home组件，而不是相反。

于 2021-07-30T14:21:12.563 回答