getServerSideProps 无法正常运行

Posted 2023-03-30

【中文标题】getServerSideProps 无法正常运行

【英文标题】：getServerSideProps can't run properly

【发布时间】：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())

你知道吗，我找到了我自己的解决方案，但我知道这是否正确，但它有效..

【参考方案1】：

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

【讨论】：

你是对的！我只在终端中看到了我的控制台，但是，你知道为什么我仍然无法在我的地图中显示任何数据吗？获取按预期工作

您是否尝试过添加查询参数？你用的网址是什么。

我正在使用这个 url jsonplaceholder.typicode.com/posts/?q=a 来获取数据，但我想我知道如何处理这个想法，我只需要传递道具并将其保存到状态。

【参考方案2】：

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