getServerSideProps错误：JSON中位置0处的意外标记〈

a9wyjsp7 于 2023-03-24 发布在其他

关注(0)|答案(2)|浏览(173)

我正在使用next.js，我想通过getStaticProps（）从data1.json文件中获取数据。问题是我得到了错误：
FetchError：invalid json response body at http：//localhost：3000/data/data1.json原因：JSON中位置0处的意外标记〈
我有以下代码：

trains.js（projectfolder/pages/trains.js）

export default function Trainings({ data }) {
  console.log(data);
  
  return (
    <main>
      <h1>My trainings</h1>
    </main>
  );
}

export async function getServerSideProps() {
  const res = await fetch('http://localhost:3000/data/data1.json');
  const data = await res.json();

  return { props: { data } };
}

data1.json（projectfolder/data/data1.json）

[
    {
        "name": "Jescie Duncan",
        "email": "nunc@protonmail.couk",
        "address": "Ap #666-9989 Nisi Avenue"
    },
    {
        "name": "Karen Bartlett",
        "email": "tellus.imperdiet@aol.couk",
        "address": "P.O. Box 787, 2857 Tincidunt Ave"
    },
    {
        "name": "Teegan Valdez",
        "email": "lacus.mauris.non@hotmail.edu",
        "address": "Ap #474-300 Nullam Avenue"
    },
    {
        "name": "Stuart Silva",
        "email": "nulla.donec.non@google.edu",
        "address": "336-2367 Eu Ave"
    }
]

JSON

来源：https://stackoverflow.com/questions/72518367/getserversideprops-error-unexpected-token-in-json-at-position-0

2条答案

按热度按时间

t3psigkw1#

请检查http://localhost:3000/data/data1.json API是否正常工作。因为Nextjs默认支持React组件，而不是JSON。如果你想作为API，你需要使用NextJS api路由，你需要专门将逻辑放在api文件夹中。
在api/data/data1.js文件中

import data from '/path/to/json'
async function handler(req, res) {
  return res.status(200).json(data)
}

export default handler;

但更好的方法是：因为你有JSON文件，你直接在trainings.js中导入数据，而不是调用API。

import data from 'path/to/json';
export async function getServerSideProps() {

  return { props: { data } };
}

赞(0）回复(0）举报 2023-03-24

lx0bsm1f2#

如果有人遇到这个问题（同样的事情发生在我身上），这个错误：

Unexpected token < in JSON at position 0

在你的“data”文件夹中可能包含一些隐藏的文件。在我的例子中，它是.DS_Store文件。所以我所做的是，
1.移动此"data" folder some where
1.在根目录中，创建一个名为“data”新文件夹（再次）
1.现在回到你移动的"data" folder some where，并通过逐个选择它来获取所有的json文件，不要做“选择所有文件”，因为你可能仍然会选择你试图摆脱的隐藏文件
1.将这些json文件复制并粘贴到新创建的“data”文件夹中
这解决了我的问题，每次它的发生。我很确定有更好的方法来做到这一点，但我生存这样做多次。哈哈
编辑：如果有一种方法只readdir的.json文件，请帮助我/我们在这里评论。

赞(0）回复(0）举报 2023-03-24

我来回答

getServerSideProps错误：JSON中位置0处的意外标记〈

2条答案

相关问题

热门标签

最新问答