next.js getServerSideProps被调用两次并在第二次调用时返回对象

c0vxltue  于 2023-04-20  发布在  其他
关注(0)|答案(2)|浏览(368)

我有一个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;
flmtquvp

flmtquvp1#

您遇到的问题可能与tagId参数传递给getServerSideProps函数的方式有关。在console.log语句中,您正在打印出context.params对象,该对象应包含pTagId和tagId值。但是,在第二次调用getServerSideProps时,您看到的是“[object Object]”而不是tagId值。
tagId参数可能传递错误,或者作为对象而不是字符串传递。您可以尝试修改console.log语句,以分别打印tagId的类型和tagId值。这将允许您查看传递的值的类型,并确保它是字符串。

console.log("typeof tagId: ", typeof tagId);
console.log("tagId value: ", tagId);

另一种可能性是这个问题与缓存有关。默认情况下,Next.js会将服务器端渲染结果缓存10秒。可能第二次调用getServerSideProps时使用的缓存结果不包含正确的tagId值。您可以尝试通过在getServerSideProps函数中将revalidate属性设置为false来禁用缓存:

return {
  props: {
    thisTag,
    childTags: childTags.Items || [],
    childItems: childItems.Items || [],
    cumulatives: cumulatives.Items || [],
  },
  revalidate: false
};
ttvkxqim

ttvkxqim2#

解决了。我找到了这个讨论:
https://github.com/vercel/next.js/discussions/13064
有一个错误的图像是导致这一点。我不真正掌握的连接,但似乎是一个坏的图像网址导致一个双响亮的错误网址数据。

相关问题