reactjs 语法错误：JSON中位置0处的意外token〈今天突然出现，我没有更改任何代码

m2xkgtsf 于 2022-12-22 发布在 React

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

嘿，
我现在正在做一个airbnb的克隆，我想通过npm run dev启动我的本地服务器，但是它给了我如下的错误。我不知道为什么今天早上一切都运行的很好，但是现在它不再运行了，即使我没有改变或者做任何事情。我在网上搜索，人们说响应可能是html而不是json，但是这怎么会突然发生呢？我还得到了一个部署的版本，你可以在这里访问https://airbnb-smoky-six.vercel.app https://airbnb-smoky-six.vercel.app这将是伟大的，如果有人能指导我通过修复它。
引用的文件包含以下代码：

import Head from 'next/head'
import Image from 'next/image'
import Header from '../Components/Header.js'
import Banner from '../Components/Banner.js'
import styles from '../styles/Home.module.css'
import SmallCard from '../Components/SmallCard.js'
import MediumCard from '../Components/MediumCard.js'
import LargeCard from '../Components/LargeCard.js'
import Footer from '../Components/Footer.js'

export default function Home({exploreData, cardsData}) {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Header />
      <Banner />
      <main className='max-w-6xl mx-auto px-12 sm:px-16'>
        <section className='pt-6'>
          <h2 className='text-4xl font-semibold pb-5'>Explore Nearby</h2>
          
          {/* Pull name from a server - API endpoints */}
          <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 '>
            {exploreData?.map(({img, distance, location}) => (
              <SmallCard
                key={img} 
                img={img} 
                distance={distance} 
                location={location}  
              />
            ))}
          </div>
        </section>

        <section>
          <h2 className='text-4xl font-semibold py-8'>Live Anywhere</h2>
          {/* pull data from API endpoints */}
          <div className='flex space-x-3 overflow-scroll scrollbar-hide p-3 -ml-3'>
            {cardsData?.map(({ img, title }) => (
              <MediumCard
              key={img}
              img={img}
              title={title}
              />
            ))}
          </div>
        </section>

        <section>
          <LargeCard
            img="https://links.papareact.com/4cj"
            title="The Greatest Outdoors"
            description="Wishlist curated by Airbnb"
            buttonText="Get Inspired"
          />
        </section>
      </main>

      <Footer />
    </div>
  )
}

export async function getStaticProps() {
  const exploreData = await fetch('https://links.papareact.com/pyp')
  .then (
    (res) => res.json()
  );

  const cardsData = await fetch('https://links.papareact.com/zp1')
  .then (
    (res) => res.json()
  );
  
  return{
    props: {
      exploreData,
      cardsData,
    },
  };
}

reactjs

来源：https://stackoverflow.com/questions/73615793/syntaxerror-unexpected-token-in-json-at-position-0-suddenly-appeared-today-wi

2条答案

按热度按时间

efzxgjgh1#

您突然收到错误，因为服务器没有响应JSON数据。这可能是服务器错误（500）或客户端错误数据（4xx）。无论是哪种原因，您的客户端都应该能够捕获错误。如果响应状态不正常（2xx HTTP状态代码），则您将抛出错误，而不是尝试解析JSON

res.json()

这里有一个很好的示例文档
你的逻辑可以改写如下：

export async function getStaticProps() {
  const exploreDataResponse = await fetch('https://links.papareact.com/pyp');

  if (!exploreDataResponse.ok) {
    // Throw error or handle logic when failed to fetch exploreData here
  }

  const exploreData = exploreDataResponse.json();

  const cardsDataResponse = await fetch('https://links.papareact.com/zp1');

  if (!cardsDataResponse.ok) {
    // Throw error or handle logic when failed to fetch cardData here
  }

  const cardsData = cardsDataResponse.json();

  return {
    props: {
      exploreData,
      cardsData,
    },
  };
}

注意：根据您的应用程序业务来决定数据和错误处理流程。

赞(0）回复(0）举报 2022-12-22

o0lyfsai2#

当你调用fetch()时，它返回一个用Response类型解析的promise，这个response有一个包含一些文本的body。
如果确定文本是JSON格式的，可以调用res.json()，它应该返回一个用正文中解析的值解析的承诺。
但是，如果响应文本在JSON格式方面存在一些问题（或者根本不包含JSON），那么您就会遇到问题中提到的问题。
假设您尝试访问的API无法保证响应始终是JSON格式的字符串，则您应该自己处理SyntaxError：

const responseText = await res.text()
let responseValue
try {
  responseValue = JSON.parse(responseText)
}
catch (error) {
  // Failed to parse JSON from the response text
  // Need to handle it somehow. In this example,
  // I simply let it be the plain text string
  responseValue = responseText 
}

你也应该考虑一下：发出请求并不总是成功的。2也许你没有连接到因特网。3也许你连接了，但是你的服务器发送了一个不成功的响应。4在这种情况下，你也应该处理不成功的情况。5一个简单的方法是检查响应对象：

if (res.ok) {
  // The value resolved from the fetch() call is a Response object
  // and you can use .ok to check if the status code fell within the 2XX range
  // In which case it means it was successful.
  // Proceed as normal here
  // e.g. ... await res.text(), then parse JSON.
}
else {
  // The response status code fell outside 2XX range,
  // so something might have gone wrong.
  // Handle that case here
}

您可以参考documentation on MDN以获得该属性和其他有用的属性。

赞(0）回复(0）举报 2022-12-22

我来回答

reactjs 语法错误：JSON中位置0处的意外token〈今天突然出现，我没有更改任何代码

2条答案

相关问题

热门标签

最新问答