web-dev-qa-db-fra.com

Importer un fichier JSON dans React

Je suis nouveau sur React et j'essaie d'importer une variable JSON DATA à partir d'un fichier externe. Je reçois l'erreur suivante: 

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

Quelqu'un pourrait-il m'aider? Cela fonctionne si ma variable DATA est dans index.js mais pas si elle se trouve 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
javascriptjsonreactjs
27
Hugo Seleiro

Un bon moyen (sans ajouter une fausse extension .js qui est pour le code, pas pour les données et les configurations) est d’utiliser le module json-loader. Si vous avez utilisé create-react-app pour échafauder votre projet, le module est déjà inclus, il vous suffit d'importer votre json:

import Profile from './components/profile';

Cette réponse en explique plus.

27
Javad Sadeqzadeh

Cette vieille châtaigne ...

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

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

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

[{
  // Note the quoted keys, "userName", "passSalted"!
  "userName":"tech1337",
  "passSalted":"xxxxxxxxxxxx"
}]

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 dans et peuvent être utilisées comme un objet standard (ou un tableau d'objets).

8
Tech1337

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

6
Shubham

essayez avec export default DATA ou module.exports = DATA

6
Salvatore

Avec json-loader installé, vous pouvez utiliser

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

ou aussi, encore plus simplement

import customData from '../customData';

Pour installer json-loader

npm install --save-dev json-loader
5
Mowzer

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 . J'ai ensuite utilisé l'API d'extraction pour extraire 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 Réaction, la demande d’extraction cherchait le fichier à l’adresse " http: // localhost: 3000/data.json ", qui est en fait le répertoire public de mon application Réactif. Mais malheureusement, lors de la compilation, le fichier data.json de l'application n'est pas déplacé de src vers un répertoire public. Nous devons donc explicitement déplacer le fichier data.json de src vers le répertoire public.

1
Akash Seth

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

Déclarer 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';

0
cesar3sparza