Importer un fichier JSON dans React

Je suis nouveau sur React et j'essaye d'importer une DATAvariable JSON à partir d'un fichier externe. J'obtiens l'erreur suivante:

Impossible de trouver le module "./customData.json"

Quelqu'un pourrait-il m'aider? Cela fonctionne si j'ai ma DATAvariable index.jsmais pas lorsqu'elle est dans un fichier JSON externe.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import customData from './customData.json';
import Profile from './components/profile';
import Hobbies from './components/hobbies';

class App extends Component {
  render() {
    return (
      <div>
        <Profile name={this.props.profileData.name}imgUrl={this.props.profileData.imgURL} />
        <Hobbies hobbyList={this.props.profileData.hobbyList}/>
      </div>
    );
  }
}

ReactDOM.render(<App profileData={DATA}/>, document.querySelector('.container'));

import React, {Component} from 'react';

var Hobbies = React.createClass({
  render: function(){
    var hobbies = this.props.hobbyList.map(function(hobby, index){
        return (<li key={index}>{hobby}</li>);
    });
    return (
        <div>
            <h5>My hobbies:</h5>
            <ul>
                {hobbies}
            </ul>
        </div>
    );
  } 
});

export default Hobbies;

import React from 'react';

var Profile = React.createClass({
render: function(){
    return (
        <div>
            <h3>{this.props.name}</h3>
            <img src={this.props.imgUrl} />
        </div>
    )
  }
});

export default Profile

var DATA = {    
    name: 'John Smith',
    imgURL: 'http://lorempixel.com/100/100/',
    hobbyList: ['coding', 'writing', 'skiing']
}

export default DATA

Une bonne façon (sans ajouter une fausse extension .js qui est pour le code et non pour les données et les configurations) est d'utiliser json-loadermodule. Si vous avez l'habitude create-react-appde scaffold votre projet, le module est déjà inclus, il vous suffit d'importer votre json:

import Profile from './components/profile';

Cette réponse explique plus.

Cette vieille châtaigne ...

En bref, vous devez utiliser require et laisser le nœud gérer l'analyse dans le cadre de l'appel requis, et non l'externaliser à un module tiers. Vous devez également veiller à ce que vos configurations soient à l'épreuve des balles, ce qui signifie que vous devez vérifier attentivement les données renvoyées.

Mais par souci de brièveté, considérons l'exemple suivant:

Par exemple, disons que j'ai un fichier de configuration 'admins.json' à la racine de mon application contenant les éléments suivants:

[{
  "userName": "tech1337",
  "passSalted": "xxxxxxxxxxxx"
}]

Notez les clés cités, "userName", "passSalted"!

Je peux faire ce qui suit et extraire facilement les données du fichier.

let admins = require('~/app/admins.json');
console.log(admins[0].userName);

Maintenant, les données sont présentes et peuvent être utilisées comme un objet régulier (ou un tableau d'objets).

Avec json-loaderinstallé, vous pouvez utiliser

import customData from '../customData.json';

ou aussi, encore plus simplement

import customData from '../customData';

À installer json-loader

npm install --save-dev json-loader

L'approche la plus simple consiste à suivre

// Save this as someJson.js
const someJson = {
  name: 'Name',
  age: 20
}

export default someJson

puis

import someJson from './someJson'

Veuillez stocker votre fichier JSON avec l'extension .js et assurez-vous que votre JSON doit être dans le même répertoire.

La solution qui a fonctionné pour moi est la suivante: - J'ai déplacé mon fichier data.json de src vers le répertoire public. Puis utilisé Fetch API pour récupérer le fichier

fetch('./data.json').then(response => {
      console.log(response);
      return response.json();
    }).then(data => {
      // Work with JSON data here
      console.log(data);
    }).catch(err => {
      // Do something for an error here
      console.log("Error Reading data " + err);
    });

Le problème était qu'après la compilation de l'application react, la requête de récupération recherche le fichier à l'URL " http: // localhost: 3000 / data.json " qui est en fait le répertoire public de mon application react . Mais malheureusement lors de la compilation du fichier react app data.json n'est pas déplacé de src vers le répertoire public. Nous devons donc déplacer explicitement le fichier data.json de src vers le répertoire public.

essayez avec export default DATAou module.exports = DATA

// renommer le fichier .json en .js et le conserver dans le dossier src

Déclarez l'objet json en tant que variable

var customData = {
   "key":"value"
};

Exportez-le en utilisant module.exports

module.exports = customData;

À partir du composant qui en a besoin, assurez-vous de sauvegarder deux dossiers en profondeur

import customData from '../customData';

Cela a bien fonctionné dans React 16.11.0

// in customData.js
export const customData = {
  //json data here
  name: 'John Smith',
  imgURL: 'http://lorempixel.com/100/100/',
  hobbyList: ['coding', 'writing', 'skiing']
}

// in index.js
import { customData } from './customData';

// example usage later in index.js
<p>{customData.name}</p>

il existe plusieurs façons de le faire sans utiliser de code ou de bibliothèques tiers (méthode recommandée).

1er STATIC WAY: créez un fichier .json puis importez-le dans votre exemple de composant react

mon nom de fichier est "example.json"

{"example" : "my text"}

la clé d'exemple à l'intérieur de example.json peut être n'importe quoi, gardez simplement à l'esprit d'utiliser des guillemets doubles pour éviter de futurs problèmes.

Comment importer dans React Component

import myJson from "jsonlocation";

et vous pouvez l'utiliser n'importe où comme ça

myJson.example

il y a maintenant quelques éléments à considérer. Avec cette méthode, vous êtes obligé de déclarer votre importation en haut de la page et ne pouvez rien importer dynamiquement.

Maintenant, qu'en est-il si nous voulons importer dynamiquement les données JSON? exemple d'un site Web d'assistance multilingue?

2 VOIES DYNAMIQUES

1. déclarez votre fichier JSON exactement comme mon exemple ci-dessus

mais cette fois, nous importons les données différemment.

let language = require('./en.json');

cela peut accéder de la même manière.

mais attendez où est la charge dynamique?

voici comment charger dynamiquement le JSON

let language = require(`./${variable}.json`);

assurez-vous maintenant que tous vos fichiers JSON sont dans le même répertoire

ici, vous pouvez utiliser le JSON de la même manière que le premier exemple

myJson.example

Qu'est ce qui a changé? la façon dont nous importons parce que c'est la seule chose dont nous avons vraiment besoin.

J'espère que ça aide.

var langs={
  ar_AR:require('./locale/ar_AR.json'),
  cs_CZ:require('./locale/cs_CZ.json'),
  de_DE:require('./locale/de_DE.json'),
  el_GR:require('./locale/el_GR.json'),
  en_GB:require('./locale/en_GB.json'),
  es_ES:require('./locale/es_ES.json'),
  fr_FR:require('./locale/fr_FR.json'),
  hu_HU:require('./locale/hu_HU.json')
}
module.exports=langs;

Exigez-le dans votre module:

let langs=require('./languages');

Cordialement