NextJS getServerSideProps 将数据传递给 Page Class
Posted
技术标签:
【中文标题】NextJS getServerSideProps 将数据传递给 Page Class【英文标题】：NextJS getServerSideProps pass data to Page Class 【发布时间】：2021-05-13 15:22:55 【问题描述】：我知道这可能已经被问过了，但我现在不知道该怎么做。 我不是（非常）有经验的 javascript 或 NextJS 开发人员。
我的问题(1)：
我得到了方法：export const getServerSideProps: GetServerSideProps = async () => 实现了从集成 API 获取一些数据（来自 NextJS 的pages/api）。代码本身可能写得不好（或更糟），但它可以工作。 （至少现在）
export const getServerSideProps: GetServerSideProps = async () =>
try
// get userID
await fetch("http://localhost:32147/api/v1/user/get?requestedField=userID&fieldName=username&fieldValue=<value removed>").then(
(userIDResponse: Response): any =>
// get userID as json
userIDResponse.json().then((userIDResult: Response): any =>
// get messages
fetch(
"http://localhost:32147/api/v1/message/get?requestedField=*&fieldName=userID&fieldValue=" +
JSON.stringify(userIDResult[0].userID)
).then((messageResponse: Response): any =>
// get messages as json
messageResponse.json().then((messageResult) =>
return
props: messages: messageResult ,
/* marker1 */
)
)
)
)
catch (error)
console.log(error)
为了清楚起见，这种方法有效，数据提取有效，但只要我在 marker1 访问它 我返回道具的那一部分：
return
props: messages: messageResult ,
我不能这样做，因为 nextjs 会因为 getServerSideProps() 没有返回任何东西而中断。 我试图将最终数据存储到一个变量中，我在此方法的第一行声明了该变量，但它最终始终为空。
我该如何解决这个问题？
我的问题(2)：如果我在此方法结束时设置手动值进行测试，它不会传递给主页面类 (index.tsx)
我可以使用this.props.<prop name> 访问它，在这种情况下：this.props.messages，对吧？
整个index.tsx：
import React, Component from "react"
import GetServerSideProps from "next"
import Router from "next/router"
import Head from "next/head"
import Navbar from "../lib/Navbar"
import MessagesModal from "../lib/MessagesModal"
export const getServerSideProps: GetServerSideProps = async () =>
try
// get userID
await fetch("http://localhost:32147/api/v1/user/get?requestedField=userID&fieldName=username&fieldValue=<value removed>").then(
(userIDResponse: Response): any =>
// get userID as json
userIDResponse.json().then((userIDResult: Response): any =>
// get messages
fetch(
"http://localhost:32147/api/v1/message/get?requestedField=*&fieldName=userID&fieldValue=" +
JSON.stringify(userIDResult[0].userID)
).then((messageResponse: Response): any =>
// get messages as json
messageResponse.json().then((messageResult) =>
return
props: messages: messageResult ,
)
)
)
)
catch (error)
console.log(error)
interface HomeProps
messages?: []
export default class Home extends Component<HomeProps>
constructor(props)
super(props)
state =
messagesModal: false,
messages: [],
// triggers logout
triggerLogOut(): void
render(): JSX.Element
return (
<>
<Head>
<title>OneDrive Event Connector</title>
</Head>
<Navbar
ItemClickCallback=(callbackItem: string): void =>
if (callbackItem === "messages")
this.setState( messageModal: !this.state.messageModal )
else if (callbackItem === "log_out")
this.triggerLogOut()
else
Router.push("/" + callbackItem)
/>
<div className="app-content"></div>
<MessagesModal
messages=this.props.messages
isOpen=this.state.messagesModal
toggleModal=() =>
this.setState( messageModal: !this.state.messagesModal )
/>
</>
)
这只是一个让我练习和学习的“有趣”项目。 如果有人能给我提示一下我的问题/错误是什么，那就太好了...
谢谢。
亲切的问候 奥利弗
【问题讨论】：
【参考方案1】：我不能这样做，因为 getServerSideProps() 没有返回任何东西，nextjs 会崩溃。
完全正确 - 在您的代码中，您在一系列承诺中返回值 - 您需要确保每个步骤都返回值
这是一个工作示例 - 与交换 API 类似的流程 - 帮助您了解如何返回某些东西，从链式承诺的内部返回
export const getServerSideProps: GetServerSideProps = async () =>
try
// initial fetch
const result = await fetch("https://jsonplaceholder.typicode.com/todos/1")
.then((todosResponse: Response): any =>
return todosResponse.json().then((todo) =>
// fetch something more
return fetch(
"https://jsonplaceholder.typicode.com/users/" + todo.userId
).then((userResponse: Response): any => userResponse.json());
)
)
return
props: messages: result ,
catch (error)
console.log(error)
我的建议也是阅读更多关于 JS 世界中的 promises / async await
我的问题(2) 我可以使用 this.props 访问它，在这种情况下：this.props.messages，对吧？
是的，没错
interface HomeProps
messages?: []
export default class Home extends Component<HomeProps>
constructor(props)
super(props)
render()
return (
<>
JSON.stringify(this.props.messages)
</>
)
【讨论】：
以上是关于NextJS getServerSideProps 将数据传递给 Page Class的主要内容，如果未能解决你的问题，请参考以下文章
为啥 NextJS 中的 ApolloGraphQL 示例使用 getStaticProps 而不是 getServerSideProps
在 NEXTJS 的 getServerSideProps() 中获取一些 html 表单数据（或对象）
如何将道具从组件传递到 NextJS 中的 getServerSideProps()？
nextjs getServerSideProps 显示加载