错误消息：SyntaxError: Unexpected token < in JSON at position 0

Question

我试图为一个项目获取数据但每次我将获取数据转换为 json 它都会返回我

SyntaxError: 位置 0 处的 JSON 中的意外标记 <

我不明白为什么它给我看这个

import React,{useContext,useState,useEffect} from 'react'

const url = 'www.thecocktaildb.com/api/json/v1/1/search.php?s='


export default function AppProvider({children}) {
    const [loading,setLoading] = useState(true)
    const [searchTerm,setSearchTerm] = useState('a') 
//set it as 'a' for suggestion at search bar at beginning.
    const [cocktails,setCocktails] = useState([])

    const fetchUrl = async ()=>{
        setLoading(true)
        try {
            const response = await fetch(`${url}${searchTerm}`)
//(${url}${searchterm} helps me to fetch data at first with names that starts with 'a' for suggestion///
            const data = await response.json()
            setLoading(false)
        } catch (error) {
            console.log(error)
        }
    }

    useEffect(()=>{
        fetchUrl()
    },[searchTerm])

请从 URL 访问 API 页面并查看数据是否存在问题。 数据未获取。 有什么问题？

关联

Answer 1

正在做

fetch('www.thecocktaildb.com/')

不会获取该网站，而是获取相对于当前路径的路径。 例如，在 Stack Overflow 上执行此操作会导致获取的 URL 为

https://stackoverflow.com/questions/72914244/www.thecocktaildb.com/

当然，它不存在 - 并且大概该 URL 也不存在于您的网站上。

使用完整路径。

const url = 'https://www.thecocktaildb.com/api/json/v1/1/search.php?s='

我还建议仅在searchTerm不为空时调用 API，并且可能添加几百毫秒的去抖动，以免过于频繁地调用它并防止客户端被阻塞。