如何将道具从组件传递到 NextJS 中的 getServerSideProps()?
Posted
技术标签:
【中文标题】如何将道具从组件传递到 NextJS 中的 getServerSideProps()?【英文标题】:How do I pass a prop from from component to getServerSideProps() in NextJS? 【发布时间】:2021-10-06 00:23:18 【问题描述】:我想将组件中的道具传递给 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,
【问题讨论】:
你不能将数据从你的组件传递给getServerSideProps
,数据会反过来,从getServerSideProps
到你的React组件。
那么我应该使用什么来代替 getServerSideProps?
这能回答你的问题吗? How to recall getServerSideProps from same component with updated api url?
【参考方案1】:
您似乎误解了getServerSideProps
的作用。
文档状态:
如果您从页面导出名为 getServerSideProps 的异步函数, Next.js 将使用数据在每个请求上预渲染此页面 由 getServerSideProps 返回。
因此,您返回的数据将传递给您的 Home
组件,而不是相反。
【讨论】:
那么我应该使用什么来代替 getServerSideProps?以上是关于如何将道具从组件传递到 NextJS 中的 getServerSideProps()?的主要内容,如果未能解决你的问题,请参考以下文章
NextJS getStaticProps 没有将返回的道具传递给页面
Next.js 使用 getServerSideProps 如何将道具从页面传递到组件?
在 NextJS 中是不是可以让自定义 _app.js 读取 slug、getInitialProps 并将这些道具传递给每个组件,包括所有页面?