通过 Link 将 id 传递给 getServerSideProps :next js

Question

我有一些警报组件。我想从每个组件中传递 itm._id

并在 [itm].jsx 中的同一文件夹中接收它我想在 getServerSideProps 函数中使用它来获取数据

index.jsx

  <div className="question11">
            {data.map((itm) => (
              <Link
                key={itm._id}
                href={{
                  pathname: "/[itm]",
                  query: itm._id,
                }}
                as={`/${encodeURIComponent(
                  itm.Name.replace(/[^a-zA-Z0-9 - _ . ~]/g, "").replace(
                    / /g,
                    "-"
                  )
                )}`}
              >
                <Alert className="question13">{itm.Name}</Alert>
              </Link>
            ))}
          </div>

流动的是 getServerSideProps 函数，我现在得到的错误是

Server Error FetchError: invalid json response body at https://askover.wixten.com/questone/[object%20Object] reason: Unexpected token < in JSON at position 0

我认为错误是 id 被接收为对象我该如何解决这个问题

[itm].jsx

export async function getServerSideProps(query) {
  var id1 = query;

  console.log(id1);
  const queryRequest = fetch("https://askover.wixten.com/questone/" + id1).then(
    async (res) => await res.json()
  );
  const answerRequest = fetch(
    "https://askover.wixten.com/answersapi/" + id1
  ).then(async (res) => await res.json());

  const responses = await Promise.all([queryRequest, answerRequest]);
  const [posts, answerPosts] = await Promise.all(responses);

  return {
    props: {
      posts,
      answerPosts,
    },
  };
}

Answer 1

您必须从如下查询中接收 itm。查询本身是一个对象。在对象内部，您的路径变量作为动态文件名存在。您正在按对象获取数据。您必须通过 itm 别名 id1.

获取数据

export async function getServerSideProps({ query }) {
  var {itm: id1} = query;
  ...

  return {
    props: {
      posts,
      answerPosts,
    },
  };
}

Answer 2

如果您查看 getServerSideProps 的文档，您会看到名为 context 的参数 - 这是一个对象，而不是您期望的 ID。

https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

引用：

上下文参数是一个包含以下键的对象：

req：HTTP IncomingMessage 对象。
res：HTTP 响应对象。
query：表示查询字符串的对象。

（其他已删除）

因此您的查询参数将在 context.query.

试试这个：

export async function getServerSideProps(context) {
  const query = context.query
  console.log(query?.itm);
  // ^  
}

您将查询参数命名为 itm（因为文件名为 [itm].tsx）- 因此 context.query.itm 应该会为您提供所需的值。在添加 URL.

之前检查控制台

Answer 3

我认为问题在于您没有从 getServerSideProps 的参数中解构查询该错误告诉您您正在向 /[object object] 发出请求，这意味着您的 id 不是字符串，它是 getServerSideProps 函数的整个道具对象。

导出异步函数 getServerSideProps(query)

替换为

导出异步函数 getServerSideProps({query})

Answer 4

试试这个：在 Link 中标记传递查询为

<div className="question11">
            {data.map((itm) => (
              <Link
                key={itm._id}
                href={{
                  pathname: "/[itm]",
                  query: {id: itm._id},
                }}
                as={`/${encodeURIComponent(
                  itm.Name.replace(/[^a-zA-Z0-9 - _ . ~]/g, "").replace(
                    / /g,
                    "-"
                  )
                )}`}
              >
                <Alert className="question13">{itm.Name}</Alert>
              </Link>
            ))}
          </div>

并且在 getserversideprops 中你可以像这样访问它

export async function getServerSideProps(context) {
  console.log(contex.params.id)  //If doesn't work use context.query.id
}

通过 Link 将 id 传递给 getServerSideProps :next js

passing id through Link to getServerSideProps :next js

javascript

reactjs

next.js