estaba tratando de obtener datos para un proyecto, pero cada vez que convierto los datos de obtención a json, me devuelve
SyntaxError: Token inesperado < en JSON en la posición 0
no entiendo porque me muestra esto
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])visite la página de la API desde la URL y vea si hay algún problema con los datos. los datos no se están recuperando. ¿Cual es el problema?
Haciendo
fetch('www.thecocktaildb.com/')no buscará ese sitio web, sino esa ruta relativa a la ruta actual . Por ejemplo, hacerlo aquí en Stack Overflow da como resultado que la URL que se busca sea
https://stackoverflow.com/questions/72914244/www.thecocktaildb.com/que, por supuesto, no existe, y presumiblemente esa URL tampoco existe en su sitio.
Utilice la ruta completa.
const url = 'https://www.thecocktaildb.com/api/json/v1/1/search.php?s=' También recomendaría llamar a la API solo cuando searchTerm no esté vacío, y tal vez agregar un rebote de unos pocos cientos de milisegundos para no llamarlo con demasiada frecuencia y evitar que el cliente sea bloqueado.