wake-up-neo.net

Obtener el archivo JSON local de la carpeta pública ReactJS

Tengo un problema desde hace dos días; Quiero leer un JSON local de mi carpeta pública en mi React aplicación creada con react-app.

Esta es mi estructura de proyecto:

  • público

    • datos

      • mato.json (mi archivo .JSON)
  • src

    • componentes

      • App.js

¿Por qué pongo mi archivo en la carpeta public? Si construyo mi proyecto con un archivo en la carpeta src, mi archivo se incluirá en el main.js Generado por el comando yarn build.

Quiero modificar mi archivo json sin siempre reconstruir mi aplicación.

Entonces no puedo usar código como:

import Data from './mato.json'

…o:

export default { 'mydata' : 'content of mato.json'}
import data from 'mydata';

Traté de recuperar mi archivo .json pero "esquema de archivo" no es amigo de fetch() & chrome ..

(Error de Chrome: "index.js: 6 Fetch API no puede cargar el archivo: /// D: /projects/data/mato.json. El" archivo "del esquema de URL no es compatible".)

Este es mi código para buscar:

fetch(`${process.env.PUBLIC_URL}/data/mato.json`)
.then((r) => r.json())
.then((data) =>{
    ReactDOM.render(<App appData={JSON.stringify(data)}/>, document.getElementById('root'));
})

Solo funciona con Firefox. También probé mode: 'cors' No es mejor.

Y, por supuesto, no tengo ningún servidor, es un proyecto local, por lo que si alguien sabe cómo puedo leer mi archivo JSON localmente, lo agradeceré mucho.

6
Kevz

Creo que tu argumento de búsqueda está mal. Debería ser

fetch('data/mato.json')
8
Quentin

Siempre que los archivos de datos se coloquen en una carpeta pública, debería funcionar en Chrome también como en mi proyecto. Por lo tanto, fetch ('data/mato.json') es suficiente para ello.

3
Lex Soft