我有一个next.js应用程序。其中一个页面两次调用getServerSideProps。在第二次调用时,它在第二次调用时返回一个字符串“[object,Object]”。这显然会在页面尝试加载时导致错误。
这是刚刚开始的,我不知道如何诊断这个问题。页面接受了两个URL参数。我在getServerSideProps函数中将它们输出到控制台,如下所示。在第一次调用时,两个属性作为输入。在第二次调用时,第一个没有问题,但第二个是“[object Object]”。
页面找不到了
// React and Next items
import React, { useEffect, useState } from "react";
// Bootstrap items
import { Container, Row, Col } from "react-bootstrap";
// My components
import Layout from "../../../components/layout";
import TagInfo from "./TagInfo";
import TagList from "../../../components/TagList";
import ArticleLine from "../../../components/ArticleLine";
// API functions
import { getFullTagData } from "../../../utils/api/tag";
import { updateTag } from "../../../utils/api/tag";
// Utility functions
import {
checkChildTagProperties,
syncCumulativeValues,
} from "../../../utils/tags";
import { updateCumulative } from "../../../utils/api/cumulative";
import { setLatestItems } from "../../../utils/tagLatestItems";
// Contexts
import { useUser } from "../../../Contexts/UserContext";
const Tag = ({ thisTag, childTags, childItems, cumulatives }) => {
const userData = useUser();
const [stateTag, setStateTag] = useState(thisTag);
const [stateTags, setStateTags] = useState(childTags);
const [stateItems, setStateItems] = useState(childItems);
const addChildItem = (newItem) => {
setStateItems([...stateItems, newItem]);
setLatestItems(stateTag, newItem, stateTag.parent_tag_id);
};
const addChildTag = (newTag) => {
setStateTags([...stateTags, newTag]);
};
const handleShowEditArticle = (status, newArticle) => {
setCurrentArticle(newArticle);
setShowEditArticle(status);
};
const handleShowDeleteItem = (status, item) => {
setCurrentArticle(item);
setShowDeleteItem(status);
};
// When the page loads, run code to check the child tag properties
useEffect(() => {
checkChildTagProperties(stateTag, stateTags, updateTag);
syncCumulativeValues(
stateTag,
stateTags,
stateItems,
cumulatives,
updateTag,
updateCumulative
);
setLatestItems(stateTag.id, stateItems, stateTag.parent_tag_id);
}, []);
return (
<Layout>
<Container>
<Row>
<Col xs={{ span: 12 }} md={{ span: 10, offset: 1 }}>
<TagInfo
tag={stateTag}
cumulatives={cumulatives}
userData={userData || {}}
addChildItem={addChildItem}
addChildTag={addChildTag}
setThisTag={setStateTag}
/>
<Row className="accent-top">
<Col className="mt-3">
{stateTags.length > 0 && <TagList tags={stateTags} />}
</Col>
</Row>
<Row>
<Col className="mt-3">
{stateItems
.sort((a, b) =>
a.itemDate < b.item_date
? 1
: b.itemDate < a.itemDate
? -1
: 0
)
.map((article, i) => (
<ArticleLine
article={article}
parentTag={stateTag}
key={`article${i}`}
handleShowEditArticle={handleShowEditArticle}
handleShowDeleteItem={handleShowDeleteItem}
/>
))}
</Col>
</Row>
</Col>
</Row>
</Container>
</Layout>
);
};
export async function getServerSideProps(context) {
const { pTagId, tagId } = context.params;
console.log(context.params);
if (pTagId && tagId && tagId !== "[object Object]") {
const response = await getFullTagData(pTagId, tagId);
const thisTag = await response[0].json();
const childTags = await response[1].json();
const childItems = await response[2].json();
const cumulatives = await response[3].json();
return {
props: {
thisTag,
childTags: childTags.Items || [],
childItems: childItems.Items || [],
cumulatives: cumulatives.Items || [],
},
};
} else {
return {};
}
}
export default Tag;
2条答案
按热度按时间flmtquvp1#
您遇到的问题可能与tagId参数传递给getServerSideProps函数的方式有关。在console.log语句中,您正在打印出context.params对象,该对象应包含pTagId和tagId值。但是,在第二次调用getServerSideProps时,您看到的是“[object Object]”而不是tagId值。
tagId参数可能传递错误,或者作为对象而不是字符串传递。您可以尝试修改console.log语句,以分别打印tagId的类型和tagId值。这将允许您查看传递的值的类型,并确保它是字符串。
另一种可能性是这个问题与缓存有关。默认情况下,Next.js会将服务器端渲染结果缓存10秒。可能第二次调用getServerSideProps时使用的缓存结果不包含正确的tagId值。您可以尝试通过在getServerSideProps函数中将revalidate属性设置为false来禁用缓存:
ttvkxqim2#
解决了。我找到了这个讨论:
https://github.com/vercel/next.js/discussions/13064
有一个错误的图像是导致这一点。我不真正掌握的连接,但似乎是一个坏的图像网址导致一个双响亮的错误网址数据。