关键词：
【中文标题】为啥 getServerSideProps 没有将正确的值传递给组件 props？【英文标题】：Why does getServerSideProps doesn't pass the right value to the component props?为什么 getServerSideProps 没有将正确的值传递给组件 props？ 【发布时间】：2021-04-21 16:16:02 【问题描述】：我正在尝试从 4 个不同的端点获取数据并使用 getServerSideProps (Next.js) 将它们作为道具传递，但尽管从 getServerSideProps 返回的“课程”变量确实包含所需的课程，但参数组件接收到的 courses 结果是一个空数组 ([])
import axios from 'axios'
import React from 'react'
import Courses from '../../components/career/Courses'
import JobExperiences from '../../components/career/JobExperiences'
import University from '../../components/career/University'
import Layout from '../../components/ui/Layout'
import SectionDescription from '../../components/ui/SectionDescription'
import Course from '../../data/interfaces/career/Course'
import useTranslation from '../../hooks/useTranslation'
interface CareerProps
courses: Course[]
const Career = ( courses : CareerProps) =>
const t = useTranslation();
return (
<Layout title="Career">
<section className="p-5 sm:p-8 md:p-16 lg:p-32">
<header>
<SectionDescription title=t.career.title description=t.career.description />
</header>
<JobExperiences />
<University />
<Courses courses=courses />
</section>
</Layout>
)
export async function getServerSideProps()
const courses: Course[] = []
const courseIDs = [
"1362070",
"3096364",
"947098",
"1879018",
]
courseIDs.forEach(async courseID =>
const data = await axios.get(`https://www.udemy.com/api-2.0/courses/$courseID/`);
courses.push(data)
)
return
props: courses: courses ,
export default Career
【问题讨论】：
forEach 不会等待承诺得到解决，即使您使用的是异步等待
【参考方案1】：
尝试将 API 调用替换为以下内容，因为 forEach 无法按预期处理 async-await 调用：
await Promise.all(
courseIDs.map(async (courseID) =>
const data = await axios.get(`https://www.udemy.com/api-2.0/courses/$courseID/`);
courses.push(data);
)
);
【讨论】：
为啥 NextJS 中的 ApolloGraphQL 示例使用 getStaticProps 而不是 getServerSideProps
】为啥NextJS中的ApolloGraphQL示例使用getStaticProps而不是getServerSideProps【英文标题】：WhyDoesTheApolloGraphQLexampleinNextJSusegetStaticPropsandnotgetServerSideProps为什么NextJS中的ApolloGraphQL示例使用getStaticProps而不是getServerSideProps【发布时间】：2 查看详情
NextJS getServerSideProps() 具有多个获取请求
】NextJSgetServerSideProps()具有多个获取请求【英文标题】：NextJSgetServerSideProps()withmultiplefetchrequests【发布时间】：2021-04-0906:29:53【问题描述】：有没有办法在单个getServerSideProps()中从多个API路由中获取数据？我有一个表，我需要显... 查看详情
Next.js - 页面没有让 GetServerSideProps 进入页面组件道具（使用自定义 _app.js）
】Next.js-页面没有让GetServerSideProps进入页面组件道具（使用自定义_app.js）【英文标题】：Next.js-PagenotgettingGetServerSidePropsintoPagecomponentprops(withcustom_app.js)【发布时间】：2020-07-0614:54:31【问题描述】：我一直在尝试将GetServerSideProps添... 查看详情
将 getServerSideProps 函数放在帮助程序中
】将getServerSideProps函数放在帮助程序中【英文标题】：PlacegetServerSidePropsfunctioninanhelper【发布时间】：2021-08-1004:59:59【问题描述】：我有很多页面需要使用firebase管理方法来保护：constgetServerSideProps=async(ctx:GetServerSidePropsContext)=>... 查看详情
将单个 getServerSideProps 方法导入 Nextjs 中的多个页面
】将单个getServerSideProps方法导入Nextjs中的多个页面【英文标题】：importasinglegetServerSidePropsmethodtomultiplepagesinNextjs【发布时间】：2022-01-1023:28:43【问题描述】：我正在尝试将getServerSideProps方法从该页面导入到另一个页面，并在多个... 查看详情
如何将道具从组件传递到 NextJS 中的 getServerSideProps()？
】如何将道具从组件传递到NextJS中的getServerSideProps()？【英文标题】：HowdoIpassapropfromfromcomponenttogetServerSideProps()inNextJS?【发布时间】：2021-10-0600:23:18【问题描述】：我想将组件中的道具传递给getServerSideProps()。他们都在同一页上... 查看详情
getServerSideProps 无法正常运行
】getServerSideProps无法正常运行【英文标题】：getServerSidePropscan\'trunproperly【发布时间】：2021-04-2201:50:54【问题描述】：我正在尝试更深入地研究Next.js，目前我在getServerSideProps()函数中。我不知道为什么，看起来这个功能没有工作/... 查看详情
Next.js 使用 getServerSideProps 如何将道具从页面传递到组件？
】Next.js使用getServerSideProps如何将道具从页面传递到组件？【英文标题】：Next.jsusinggetServerSidePropshowdoipasspropsfrompagetocomponents?【发布时间】：2021-06-3020:58:58【问题描述】：我正在尝试获取coingecko-api以访问比特币的实时价格。我正... 查看详情
没有当前用户 - getServerSideProps Next JS 和 AWS Amplify
】没有当前用户-getServerSidePropsNextJS和AWSAmplify【英文标题】：Nocurrentuser-getServerSidePropsNextJSandAWSAmplify【发布时间】：2021-05-0415:40:09【问题描述】：我正在尝试使用AWSAmplify和NextJS在getServerSideProps的服务器端发出经过用户身份验证的... 查看详情
使用 NextJS 在 getServerSideProps 中没有可用数据时显示 div？
】使用NextJS在getServerSideProps中没有可用数据时显示div？【英文标题】：Showdivwhenthere\'snotdataavailableingetServerSidePropswithNextJS?【发布时间】：2021-07-2707:46:17【问题描述】：好的，这是我关于NextJS的第三篇文章。我目前正在制作一个搜... 查看详情
如何从 Nextjs 中的另一个页面将附加数据传递给 getserversideprops？
】如何从Nextjs中的另一个页面将附加数据传递给getserversideprops？【英文标题】：HowtopassadditionaldatatogetserversidepropsfromanotherpageinNextjs?【发布时间】：2021-03-1822:34:38【问题描述】：我想将上一页中的projectID(/projects)传递给(/project/[proj... 查看详情
getServerSideProps() 未使用组件运行
】getServerSideProps()未使用组件运行【英文标题】：getServerSideProps()notrunningusingcomponent【发布时间】：2021-09-0402:38:46【问题描述】：我正在使用Next.js制作一个小型Web应用程序，但我不知道为什么，但是当我使用该组件时，getServerSide... 查看详情
getServerSideProps 不使用导入更新数据
】getServerSideProps不使用导入更新数据【英文标题】：getServerSidePropsisnotupdatingdatawithimport【发布时间】：2021-08-2018:40:46【问题描述】：我遇到了NextJS中的getServerSideProps没有在页面加载时更新值的问题。从导入的JSON文件的数据中调... 查看详情
使用带有 NextJS 的 getServerSideProps 生成多个页面
】使用带有NextJS的getServerSideProps生成多个页面【英文标题】：GeneratemultiplepagesusinggetServerSidePropswithNextJS【发布时间】：2021-11-1714:51:12【问题描述】：我的演示API将返回[title:"Firstarticle",id:"1",title:"Secondarticle",id:"2"]我想为每个人创... 查看详情
Prisma、TS 和 getServerSideProps，我被卡住了
】Prisma、TS和getServerSideProps，我被卡住了【英文标题】：Prisma,TSandgetServerSideProps,I\'mstuck【发布时间】：2022-01-0402:08:58【问题描述】：我试图在我的Nextjs应用程序中通过Prisma进行简单查询，没有错误但无法返回任何结果，并且consol... 查看详情
使用 getServerSideProps 的 NextJS 错误“对象作为反应子无效”
】使用getServerSideProps的NextJS错误“对象作为反应子无效”【英文标题】：NextJSerror"objectsarenotvalidasareactchild"withgetServerSideProps【发布时间】：2021-10-1912:09:48【问题描述】：进入此处作为代码列出的页面时，我不断收到错误... 查看详情
使用 Next Js getServerSideProps 进行 Apollo 查询？
】使用NextJsgetServerSideProps进行Apollo查询？【英文标题】：ApolloquerywithinNextJS\'sgetServerSideProps?【发布时间】：2020-09-2923:01:14【问题描述】：我正在将NextJS与Apollo一起使用。文档不多说，但指向这个repo：https://github.com/vercel/next.js/tree... 查看详情
从 `getServerSideProps` 返回了额外的密钥。从 getServerSideProps 返回 notFound 对象
】从`getServerSideProps`返回了额外的密钥。从getServerSideProps返回notFound对象【英文标题】：Additionalkeyswerereturnedfrom`getServerSideProps`.ReturnnotFoundobjectfromgetServerSideProps【发布时间】：2021-06-2820:20:20【问题描述】：我有下一个应用程序。... 查看详情