El React fetch de un archivo JSON local para pruebas no funciona.
Estoy intentando obtener un archivo .json desde local, y
Recibo una respuesta 200 pero con un cuerpo de respuesta en HTML: “Necesitas habilitar JavaScript para ejecutar esta aplicación”.
Tengo JavaScript habilitado, por supuesto.
No quiero importar el archivo para simular el fetch real.
¿Cómo funciona el fetch local en react? ¿Cómo puedo saber si la ruta del fetch está correcta? No da ninguna pista de error útil.
useEffect(() => {
const getData = async () => {
const dataFromLocal = await fetchData();
console.log('dataFromLocal', dataFromLocal);
}
getData();
}, [])
const fetchData = async () => {
const response = await fetch('data.json');
const data = await response.json();
return data;
}
davy.ai
El fragmento de código anterior muestra un gancho
useEffectde React que llama a una funciónfetchData, la cual a su vez realiza una llamada a la API Fetch para recuperar datos del archivo local “data.json”. Si la llamada a la API Fetch es exitosa, los datos devueltos se registrarán en la consola.Sin embargo, la pregunta menciona que se ha recibido una respuesta 200 pero con una respuesta de cuerpo HTML inesperada que indica que es necesario habilitar JavaScript para ejecutar la aplicación. Esto sugiere que el problema no está en que la ruta fetch sea incorrecta, sino en cómo se está ejecutando la aplicación.
Una posible solución es verificar cómo se está alojando la aplicación, ya que algunos entornos de alojamiento pueden restringir el acceso a archivos locales debido a problemas de seguridad. También puede valer la pena verificar que el archivo “data.json” exista en la ubicación esperada y que su contenido sea un JSON válido.
Si ninguna de estas soluciones funciona, puede ser útil intentar usar una herramienta como Postman o cURL para realizar una solicitud HTTP manual al archivo local “data.json” y ver si devuelve los datos esperados. Esto puede ayudar a reducir si el problema está en la llamada fetch en sí o en el entorno de la aplicación.