getServerSideProps 无法正常运行答案

【问题标题】：getServerSideProps can't run properlygetServerSideProps 无法正常运行
【发布时间】：2021-04-22 01:50:54
【问题描述】：

我正在尝试更深入地研究 Next.js，目前我在 getServerSideProps() 函数中。我不知道为什么，看起来这个功能没有工作/运行，我使用console.log 并且它没有显示我试图显示的日志。

这是我的代码：

import React from "react";

export default function Get({ results: query }) {
  return (
    <div>
      <h1>Check getServerSideProps</h1>
      {query.map((q, index) => {
        <div key={index}>
          <h1>{q.title}</h1>
          <p>{q.body}</p>
        </div>;
      })}
    </div>
  );
}

export async function getServerSideProps(context) {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts/?q=${context.params.query}`
  );
  console.log("CHECK");
  const datas = await res.json();
  return { props: { results: datas } };
}

结果如下：

这是我的package.json 文件的详细信息：

{
  "name": "doqmentnew",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "10.0.5",
    "react": "17.0.1",
    "react-dom": "17.0.1"
  }
}

【问题讨论】：

你的文件结构是不是像pages/tester/[query].js??
是的，那是我的文件，顺便说一句，谢谢您的评论，不知何故我可以获取数组数据，但无法将其显示到我的地图上
你能尝试像这样对数据进行水合 JSON.parse(JSON.stringfy())
你知道吗，我找到了我自己的解决方案，但我知道这是否正确，但它有效..

标签： reactjs next.js server-side-rendering

【解决方案1】：

getServerSideProps 顾名思义是一个在服务器上运行的函数。您在看什么是客户端控制台，这意味着您将在那里看到由应用程序的客户端版本创建的任何console.log。要查看您想要的 console.log，您应该尝试查看启动应用程序的终端。（你在哪里运行yarn dev/npm run dev）

【讨论】：

你是对的！我只在终端中看到了我的控制台，但是，你知道为什么我仍然无法在我的地图中显示任何数据吗？获取按预期工作
您是否尝试过添加查询参数？你用的网址是什么。
我正在使用这个 url jsonplaceholder.typicode.com/posts/?q=a 来获取数据，但我想我知道如何处理这个想法，我只需要传递道具并将其保存到状态。

【解决方案2】：

我找到了我的答案，顺便说一句，这一切都很好，最后一个任务是显示数据，所以我要做的是使用 useEffect 中的 useState 将数组（获取的数据）置于状态，并像往常一样显示它。 .

【讨论】：