getInitialProps()应该解析为一个对象。但是却发现“未定义”。
getInitialProps()是Next.js框架中的一个特殊方法，用于在服务器端渲染和客户端渲染之前获取数据。它应该返回一个包含所需数据的对象，但是如果返回的是"未定义"，可能有以下几个原因：
- 语法错误：请确保在getInitialProps()方法中正确地编写了代码，包括正确的语法和语义。
- 异步问题：getInitialProps()方法可以是异步的，可以返回一个Promise对象。如果你在方法中使用了异步操作，确保正确地处理异步逻辑，并在异步操作完成后返回数据。
- 依赖问题：getInitialProps()方法中可能使用了其他模块或依赖项，如果这些模块或依赖项未正确引入或安装，可能会导致"未定义"的错误。请确保所有依赖项都正确安装，并在方法中正确引入。
- 服务器端渲染问题：如果你正在使用服务器端渲染，可能是服务器端配置或环境问题导致getInitialProps()方法返回"未定义"。请确保服务器端环境正确配置，并且服务器能够正确执行getInitialProps()方法。
总结起来，当getInitialProps()方法返回"未定义"时，需要检查代码语法、处理异步逻辑、引入依赖项以及服务器端配置等方面的问题。如果问题仍然存在，建议查阅Next.js官方文档或寻求相关技术支持来解决问题。
关于腾讯云相关产品，由于要求不能提及具体品牌商，无法给出具体的产品和链接地址。但是腾讯云提供了一系列云计算服务，包括云服务器、云数据库、云存储、人工智能等，可以根据具体需求在腾讯云官网上查找相关产品和文档。
相关·内容
我正在调用一个页面withRouter(页面)，并期望该页面的变量(页面名为category.js)在初始页面加载时出现。查询本身在那里，键在那里，但是值是“未定义的”。在服务器端似乎有一些对getInitialProps的调用，其中2/3是未定义的。
react组件有一个构造函数，等等，它不是一个功能组件。
这是我当前的getInitialProps：
Category.getInitialProps = async ({ req, query }) => {
let authUser = req && req.session && req.sess
浏览 0提问于2019-08-14得票数 5
2回答
我正在尝试将数据从python脚本发送到下一个js服务器。
#python script
import requests
post_data = {'username':'bob', 'id' : 32}
# POST some form-encoded data:
post_response = requests.post(url='http://localhost:3000/foo', data=post_data)
我确实在服务器上收到了一个请求，但是我不知道如何在getInitalProps()中检索数据。我看过文档，但
浏览 0提问于2019-02-09得票数 2
ctx.req是未定义的Next.js。此代码位于_document.js文件中。
static async getInitialProps(ctx) {
const props = await Document.getInitialProps(ctx);
const userData = await getServerSideToken(ctx.req);
return { ...userData, ...props }
}
我试图将ctx.req传递给getServerSideToken，但是它显示了一个错误，说明ctx.req是未定
浏览 7提问于2021-05-23得票数 1
我在next.js中使用next.js
这是我的代码：
static getInitialProps( ctx ) {
console.log(ctx.isServer);
return{}
}
为什么我找不到isServer
浏览 1提问于2018-10-20得票数 1
回答已采纳
3回答
当我从我的ssr应用程序获得响应时，我尝试将项设置为会话存储，但它显示错误，会话存储未定义，因为在服务器端没有这样的存储，只有cookie，但我不需要它。 所以我的问题是，如何在NextJS中将项目从getInitialProps设置为sessionsStorage
浏览 171提问于2021-02-02得票数 2
回答已采纳
1回答
我需要在主组件getInitialProps中通过_app.ts获得cookie，但是cookie是未定义的，代码如下：
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
)
}
MyApp.getInitialProps = async ({req}: NextPageContext) => {
console.log(req.headers.cookie) //undefined
}
使用next.js的P.S
浏览 5提问于2021-12-30得票数 -1
我正在使用下面的组合，并期望a作为一个道具被传递。然而，它是未定义的。
请告诉我怎么修？
import { setStatic, compose } from 'recompose'
import { connect } from 'react-redux'
export const getInitialProps = function() {
console.log(this.props.a);
}
const mapDispatchToProps = (dispatch) => ({
a: url => dispatch({type:
浏览 2提问于2018-11-15得票数 1
我在我的_app.js中使用_app.js：
import App from "next/app";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
MyApp.getInitialProps = async ({ Component, ctx }) => {
const appContext = App.getInitialProps(ctx);
let pageProps = {};
if (Component.getIn
浏览 9提问于2022-05-04得票数 0
我有来自withUser.tsx的这一行特殊代码。在对用户进行身份验证时，经过身份验证的页面将被它包装，从而指定的用户角色将是唯一能够访问预期页面的角色。
import axios, { AxiosError } from "axios";
import { API } from "../config";
import { getCookie } from "../helpers/auth";
const withUser = (Page: any) => {
const WithAuthUser = (props: any): JS
浏览 17提问于2022-08-24得票数 0
回答已采纳
我想得到一些道具在我的反应应用程序的根层：
import React from 'react'
import App, { Container } from 'next/app'
export default class MyApp extends App {
static async getInitialProps({ Component, router, ctx }) {
let pageProps = {}
if (Component.getInitialProps) {
pageProps = await Compon
浏览 0提问于2018-10-02得票数 2
回答已采纳
我有一个元素，它有一个属性，它的值被绑定到一个击倒的可观察对象：
<text transform='matrix(1 0 0 1 1 1)' data-bind='attr:{transform:textTransform}'></text>
当元素加载时，我希望observable包含dom元素上定义的值，但是它却加载为未定义的，并且属性一起从dom元素中删除：
<text data-bind='attr:{transform:textTransform}'></text>
是否可以从dom元素属
浏览 0提问于2012-07-17得票数 14
回答已采纳
我见过许多与getInitialProps和getStaticProps有关的问题，但无法解决自己的问题。
我只是尝试加载一些json数据(我console.logged它并且知道它不是未定义的)并将它传递给我的Main组件：
import Card from "./components/Card";
import data from "../data/data.json";
const Main = ({ cards }) => {
return (
<div}>
{cards.map((card) =>
浏览 1提问于2020-08-19得票数 0
回答已采纳
我收到了附加在我的页面上的getInitialProps函数中的错误：
const getInitialProps = async ({ req, query }: NextPageContext) => {
let isValidReferenceQuery = true;
const { path } = absoluteUrl(req as IncomingMessage);
try {
await policyService.getPolicyByReference(
path,
query.referenceQuery as str
浏览 2提问于2020-11-25得票数 2
我正在使用Next.js，而且我有一个使用Express的自定义服务器。我有一个页面需要数据库中的一些数据。
getInitialProps()在服务器上运行时，可以从数据库中获取数据并返回数据，而不会出现任何问题。但是，getInitialProps()也可以在客户端运行(当用户最初请求一个不同的页面时，然后导航到这个页面)。在这种情况下，由于我在客户端，我显然不能只从数据库中获取数据--我必须使用AJAX与服务器对话，并要求它为我检索数据。
当然，这也意味着我必须在服务器上定义一个新的Express路由来处理这个请求，它将包含与getInitialProps()服务器端部分完全相同的代码，
浏览 1提问于2018-03-21得票数 16
回答已采纳
我想建立一个从db文章一个简单的网站。我的问题是，我需要这些文章与服务器一起呈现，我可以使用Next.js文档中的getInitialProps函数来实现：https://nextjs.org/docs/api-reference/data-fetching/getInitialProps#getinitialprops-for-older-versions-of-nextjs 现在它工作正常，但我想实现按ID获取文章，我的链接应该是这样的： http://localhost:3000/articles/<some_id> 我已经这样做了，但现在我想读取该ID并将其传递给getI
浏览 14提问于2020-03-14得票数 0
回答已采纳
我正在使用Next.js，并希望使用redux预取一个API项。下面是一些几乎有效的代码：
class Thing extends Component {
static getInitialProps ({ store }) {
store.dispatch(fetchProduct())
}
}
const mapStateToProps = (state, ownProps) => {
return {
product: getProduct()
}
}
我遇到了组件在getProduct有信息之前呈现的问题。我如何塑造事物，使我不会呈现，直到调度
浏览 7提问于2017-07-29得票数 0
回答已采纳
使用NextJS并看到了一个页面示例：
class IndexPage extends Component {
static async getInitialProps(context) {
return {};
}
render() {
return <div>hello world</div>;
}
}
export default withRouter(IndexPage);
getInitialProps方法在NextJS中到底是什么？
浏览 1提问于2018-09-02得票数 7
回答已采纳
我在学习Next.js，TypeScript，Redux。
接下来，为了应用redux，在googling搜索之后，我会像这样编写代码。但我不知道什么是错误，我要做什么。
import App from "next/app";
import Head from 'next/head';
/*redux*/
import withRedux from 'next-redux-wrapper';
import { Provider } from 'react-redux';
import initialStore from '
浏览 1提问于2020-03-27得票数 2
回答已采纳
我正在尝试连接一个功能良好的NextJS/React应用程序，它使用“with-redux-saga”和“with-redux”到“next-i1iN”() --但是当我的应用程序启动时，我会发现以下错误：
错误:如果您的自定义_app.js文件中有一个_app.js方法，则必须显式返回pageProps。有关更多信息，请参见：
(/Users/cerulean/Documents/Projects/PAW-React/node_modules/next-i18next/dist/hocs/app-with-translation.js:94:57) at TypeError: TypeEr
浏览 0提问于2019-02-07得票数 6
当用户第一次访问网站时，他们可以选择接受或拒绝跟踪cookie。如果他们拒绝，我会设置一个值为false的cookie。我想使用cookie的值有条件地运行gtag脚本。我尝试访问自定义document.js中的cookies，但是来自getInitialProps的请求/res是未定义的，并且document.js只在服务器端运行，所以我无法访问浏览器的cookies。我如何才能有条件地注入google分析脚本？
class MyDocument extends Document {
static async getInitialProps (ctx) {
const
浏览 2提问于2020-12-25得票数 6
1回答
我正在从外部域加载一个JSON数组。我已经让这个正确的工作，但我仍然有问题，实际显示的任何结果。通过使用示例和其他问题/答案，我已经尝试显示明显已经完成的结果，但最后却出现了一个不明显的错误：
未定义TypeError:无法读取未定义属性的“标签”
代码片段：
$('#citySearchBox').autocomplete({
source: function(request, response){
$.ajax({
url: "/api.php",
data: {
浏览 3提问于2015-11-23得票数 2
回答已采纳
因此，我有一个Next.js React组件，它使用getInitialProps在初始页面加载之前调用一些数据的后端。这看起来是这样的： static async getInitialProps({req, query}){
console.log('inside getInitialProps')
if (req){
var pinReturn = await axios.post(process.env.serverADD+'getPinData', {withCredentials: true})
.then(
浏览 19提问于2019-04-11得票数 1
回答已采纳
需要一个反应专家来帮我。提前感谢！
我试图找到一个甜蜜的地方使用redux和下一个JS，而不使设置太复杂。
GOAL：利用getInitialProps(用于)来调度操作(特别是涉及API请求的操作)，以便预先加载数据并对其进行存储。
为此，我完成了以下设置：
_app组件：
// to connect redux with react
import { Provider } from 'react-redux';
import { createWrapper } from 'next-redux-wrapper';
import { createS
浏览 2提问于2020-08-10得票数 0
给出以下Javascript示例：
var obj = function() {
var _c = function() {
console.log("c")
}
return {
a: function() {
b();
},
b: function() {
console.log("b");
},
c: function() {
_c();
}
浏览 2提问于2016-03-22得票数 1
回答已采纳
1回答
我遇到了一个问题，我可以将类或功能组件传递到我的HOC中。在特定情况下，我需要访问传入的组件(页面)上的静态属性。这里的问题是，FLOW给了我一个错误，说它无法在传递到HOC中的页面上找到静态属性：
Error:(50, 21) Flow: property getInitialProps. Property not found in statics of React$Component。
该错误来自以下代码中的此行：
const pageProps =
(await Page.getInitialProps) && (await Page.getIni
浏览 5提问于2017-06-24得票数 0
我正在使用NextJS作为客户端存储库来与我的后端应用编程接口服务器(laravel)通信。身份验证是通过存储在cookie中的JWT完成的。当我向https://my-backend-server.com/api/login发送身份验证请求并将其设置为my-backend-server.com域时，这一切都可以无缝工作，因为我使用cookie进行响应。甚至当我从浏览器发送请求时。
当我想要加载页面并从getInitialProps发送请求时，问题就出现了，因为这是一个服务器端调用。我如何才能访问my-backend-server.com的cookies，并将这些cookies放在标头中，这样
浏览 2提问于2019-12-16得票数 5
在从另一个端点执行客户端Router.push()之后，我在getInitialProps函数中执行后端查询时遇到了问题。 这就是我的意思。在我的注册页面中，我调用Router.push('/')返回主页： proceedToIndex = () => {
Router.push('/');
} 在我的'/‘页面中，我按如下方式调用getInitialProps： static async getInitialProps (context) {
try {
if (context.req.headers.c
浏览 14提问于2019-02-13得票数 0
回答已采纳
我已经为我的Next.js应用程序实现了一个自定义错误页面，方法是在my Pages文件夹中创建一个自定义_error.js文件，如文档中所述。问题是，我从getInitialProps返回的任何属性都是未定义的。
因此，我尝试保留我的自定义_error.js页面，并将示例代码放在文档中：
import React from 'react'
class Error extends React.Component {
static getInitialProps({ res, err }) {
const statusCode = res ? res.statusC
浏览 9提问于2019-03-27得票数 0
2回答
我找不到使用next.js在服务器端和客户端获取isAuthenticated变量常量值的方法
我使用自定义的app.js将应用程序包装在Apollo提供程序中。我使用布局来显示用户是否通过身份验证。defaultPage是一个即席组件。
当页面在服务器端时，isAuthenticated被设置为true。但是一旦我更改了页面-这是客户端呈现(不重新加载)- isAuthenticated一直保持在未定义的状态很长时间，直到我重新加载页面。
_app.js
import App from 'next/app';
import React from 'react'
浏览 86提问于2019-11-07得票数 4
我有这样定义的javascript对象：
function SocialMiner()
{
var verbose=true;
var profileArray=new Array();
var tabUrl;
this.getTabUrl=function()
{
logToConsole("getTabUrl is called");
chrome.tabs.getSelected(null, function(tab)
{
tabUrl = tab.url;
logToConsole(tabUrl);
浏览 0提问于2011-06-03得票数 0
回答已采纳
2回答
我转到了门庭，遵循的方法来解决屁(Flash Theme)，但是网页遇到了一个新的问题。在呈现页面之前，有一个未样式组件的闪光灯。如何解决这个问题？我查看了Nextjs，发现问题很少，但是解决方案是添加<script>0</script>，这对我来说是行不通的。
这个bug只存在于生产中，在开发过程中工作得很好。
示例:如果没有看到闪光灯，请复制链接并粘贴到浏览器中。
import Document, { Html, Head, Main, NextScript } from "next/document";
import { createGetInit
浏览 38提问于2022-03-08得票数 9
我将next.js与ssr一起使用，我得到了服务器错误：
错误:对象作为React子级无效(找到:具有键{}的对象)。如果您打算呈现一个子级集合，请改用数组。
在我的_document.js中，我的代码是这样的：
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'
export default class MyDocument extends Document
浏览 2提问于2020-07-16得票数 0
1回答
我正在使用下一个js和资料UI(@mui/core)来创建一个网站。当我使用next dev运行它时，它工作得很好，但是当我使用next build && next start时却得到了错误的样式。除了材料UI之外，我还使用CSS模块来设计我的应用程序。
我在_document.js上找到了一个解决方案，该解决方案要求在中添加这段代码，但这并不适用于我。
import * as React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document
浏览 8提问于2022-01-15得票数 0
回答已采纳
我有<MobileLayout />，<DesktopLayout />。我正在使用Next.js进行服务器端呈现。我注意到有很多著名的ui库在语义-UI-React中都有像<Respnosive />组件这样的移动检测组件。但是所有这些都是客户端方法，不能在SSR上正常工作。
我读了一些文件，结论是我应该检查服务器端的user-agent，req.headers。在Next.js中，什么是正确的方法来检测设备，并以适当的方式呈现MobileLayout / DesktopLayout中的一个
我试过什么
在_app.js中
import isMobile
浏览 3提问于2020-06-02得票数 5
我正在尝试在Typescript中创建和编译一个React Higer Order组件。
但我得到了一个错误。首先，VSCode对此提出了抱怨
'WrappedComponent' refers to a value, but is being used as a type here.
**我的Typescript编译器抛出了这个错误。**
lib/auth.ts:44:30 - error TS1005: '>' expected.
44 return <WrappedComponent {...this.props} />;
浏览 2提问于2019-04-15得票数 7
所以我有一个后端NodeJS Lambda，我从角度向它发送数据。
在NodeJS Lambda中，我运行以下代码：
const claims = event.requestContext.authorizer.claims;
username = claims['cognito:username'];
console.log(username);
console.log(event.body);
console.log(event.body['Description'])
con
浏览 6提问于2022-03-07得票数 1
在firebase.js文件上，我正在执行以下操作：
import firebase from "firebase/app";
import "firebase/firestore";
const firebaseConfig = {
apiKey: process.env.APIKEY,
authDomain: process.env.AUTHDOMAIN,
databaseURL: process.env.DATABASEURL,
projectId: process.env.PROJECTID,
storageBucket: proc
浏览 3提问于2019-12-12得票数 2
回答已采纳
我有一个问题需要帮助。我目前有一个在getInitialProps中获取数据的页面，当使用Link或Router.push导航时，它可以正常工作。但当我重新加载或将页面的URL分享给我的朋友时，它不会读取。
所以问题是，如果我在useEffect hook中获取数据，这是SEO的最佳实践，还是应该只添加add useEffect hook，并使其在资源未定义的情况下获取，这也解决了问题？
下面是我的getInitialProps
Page.getInitialProps = async (ctx: NextPageContext) => {
const {
query:
浏览 0提问于2020-03-25得票数 0
在我的NextJS应用程序中，我试图从getInitialProps中的mongodb数据库中获取json数据，如下所示：
static async getInitialProps(ctx) {
const res = await
fetch('http://localhost:3000/api/endpoint');
const json = await res.json();
return { data: json };
}
然后，我尝试呈现组件：
render() {
return (
<d
浏览 3提问于2020-06-28得票数 0
回答已采纳
我有一个使用Service从服务器调用该函数的函数:例如：
A : function(){
Service.function().then(function(rs){
return rs
})
}
B : function(){
var rs = this.A()
console.log('rs: ', rs) // undefined
}
在另一个函数中，我声明了一个变量来接收来自函数A的值，但是接收的值是未定义的。我需要帮助来解决这个问题。感谢所有人
浏览 1提问于2015-10-09得票数 0
2回答
我的前端运行在localhost:3000上，后端运行在nestjs上，运行在localhost:3006上。当用户注册或登录时，我将按照以下方式设置cookie
const setCookie = context.res.cookie('cookie-data', {
accessToken: token.accessToken,
refreshToken: token.refreshToken,
user: user,
});
现在，我需要这个cookie来验证每条路线。我的意思是，如果我转到特定的页面，这是一个私有页面，那么我需
浏览 10提问于2022-06-24得票数 0
3回答
我一直在努力将Typescript与NextJS集成，主要是与getInitialProps中的非结构化参数集成，但也与页面函数的类型集成。例如，下面是我的_app.tsx：
import { ThemeProvider } from 'styled-components';
import App, { Container } from 'next/app';
import Cookie from 'js-cookie';
import React from 'react';
import { CookiesProvider }
浏览 3提问于2019-05-29得票数 7
2回答
在我的中，我有一个表单，当用户输入某些内容时，它会进入状态，并且工作正常。但是当我试图点击submit时，它应该做一个axios，这是当我点击submit时调用的函数
handleSubmit(event) {
axios.post('/api/newBlog', this.state.title)
.then(res => console.log("Dog"));
event.preventDefault();
}
它也不打印出“狗”，它只是直接走的路线。在特快路线上，我有这样的代码：
ap
浏览 0提问于2018-05-20得票数 0
回答已采纳
我使用getInitialProps on _app获取cookie并将值向下传递给组件来设置元素的宽度，但它总是发送未定义的。
这是_app页面，我将在这里获取cookie
// _app.tsx -> page
function MyApp({ Component, pageProps }: AppProps) {
return (
<Layout {...pageProps}>
<Component {...pageProps} />
</Layout>
);
浏览 4提问于2022-06-02得票数 1
回答已采纳
1回答
我是Next.js新手，我很难将数据从_document传递到_app。
我需要将路径名服务器端从_document.ts传递到_app.ts，然后再传递到App组件，以便在Head元素服务器端注入自定义标记。每一页都会有特定的链接。
eg <link rel="x-default" hrefLang="x-default" href="https://example.com/about-us">
将出现在https://example.com/about-us页面上。
当前的实现如下所示：
getInitialProps in _d
浏览 3提问于2020-07-03得票数 3
1回答
我试图为应用程序中的所有组件创建一个主题，但是我尝试过，但是/pages/_app.js:失败了。
import App, { Container } from "next/app"; // eslint-disable-line
import React from "react";
import { ThemeProvider } from "styled-components";
export default class MyApp extends App {
static async getInitialProps({ Compone
浏览 0提问于2018-04-18得票数 2
我试图从http//localhost:3000/portfolios/helloworld中获取id，所以id就是helloworld。但我得到一个错误，说TypeError:无法分解'query‘的属性'id’，因为它是未定义的。 const PortfolioDetail = ({ query }) => {
const { id } = query;
return <h1>I am Details Page with ID: {id}</h1>;
};
PortfolioDetail.getInitialProps = ({ q
浏览 20提问于2021-07-04得票数 0
回答已采纳
我们正在尝试将我们的NextJs项目从JS移动到TS，在这样做的过程中，我遇到了以下问题。
我的_app.tsx中的getInitialProps是这样的：
static async getInitialProps({ router, ctx, Component }) {
const { req, isServer, store, res, query } = ctx;
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getIniti
浏览 45提问于2020-02-26得票数 2
回答已采纳
并且API端点(Express)发送404。
return res.status(404).json({ message: 'Not Found !!!' })
在_app组件中
static async getInitialProps({ Component, ctx }) {
try {
const pageProps = Component.getInitialProps
? await Component.getInitialProps(ctx)
: {}
const statusCode = ctx.r
浏览 1提问于2019-07-04得票数 0
1回答
我从中获取了一些数据，但我不知道为什么不能从它访问数据。下面是我的代码。
getData = (keyword, location, country) => {
let dataURI = `${URI}${keyword}+${location}+${country}${API}`;
var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
targetUrl = dataURI
fetch(proxyUrl + targetUrl)
.then((res) => res.
浏览 0提问于2018-04-20得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
