web-dev-qa-db-fra.com

Récupérer le fichier JSON local à partir du dossier public ReactJS

J'ai un problème depuis deux jours; Je veux lire un JSON local à partir de mon dossier public sur mon React application créée avec react-app.

Voici ma structure de projet:

  • publique

    • les données

      • mato.json (mon fichier .JSON)

  • src

    • composants

      • App.js

Pourquoi je place mon fichier dans le dossier public? Si je crée mon projet avec un fichier dans le dossier src, mon fichier sera inclus dans le main.js Généré par la commande yarn build.

Je souhaite modifier mon fichier json sans toujours reconstruire mon application.

Je ne peux donc pas utiliser de code comme:

import Data from './mato.json'

…ou:

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

J'ai essayé de récupérer mon fichier .json mais le "schéma de fichiers" n'est pas ami avec fetch() & chrome ..

(Erreur Chrome: "index.js: 6 Fetch API ne peut pas charger le fichier: /// D: /projects/data/mato.json. Le schéma d'URL" fichier "n'est pas pris en charge.")

Voici mon code pour aller chercher:

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

Cela ne fonctionne qu'avec Firefox. J'ai également essayé mode: 'cors' Ne fait pas mieux.

Et bien sûr, je n'ai pas de serveur - c'est un projet local - donc si quelqu'un sait comment je peux lire mon fichier JSON localement, j'apprécierai beaucoup.

javascriptjsonreactjslocalfetch-api
9
Kevin

Je pense que votre argument de récupération est faux. Ça devrait être

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

Tant que les fichiers de données sont placés dans un dossier public, cela devrait fonctionner dans Chrome également comme dans mon projet. Donc, chercher ('data/mato.json') lui suffit.

3
Lex Soft