Importa file JSON in React

Sono nuovo in React e sto cercando di importare una DATAvariabile JSON da un file esterno. Ricevo il seguente errore:

Impossibile trovare il modulo "./customData.json"

Qualcuno potrebbe aiutarmi? Funziona se ho la mia DATAvariabile in index.jsma non quando è in un file JSON esterno.

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

Un bel modo (senza aggiungere una falsa estensione .js che è per il codice non per i dati e le configurazioni) è usare json-loadermodule. Se hai usato create-react-appper impalcare il tuo progetto, il modulo è già incluso, devi solo importare il tuo json:

import Profile from './components/profile';

Questa risposta spiega di più.

Questo vecchio castagno ...

In breve, dovresti usare require e lasciare che node gestisca l'analisi come parte della chiamata require, non affidarla a un modulo di terze parti. Dovresti anche fare attenzione che le tue configurazioni siano a prova di proiettile, il che significa che dovresti controllare attentamente i dati restituiti.

Ma per brevità, considera il seguente esempio:

Ad esempio, diciamo che ho un file di configurazione "admins.json" nella radice della mia app contenente quanto segue:

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

Nota i tasti citati, "userName", "passSalted"!

Posso fare quanto segue e ottenere facilmente i dati dal file.

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

Ora i dati sono presenti e possono essere utilizzati come un oggetto normale (o array di).

L'approccio più semplice sta seguendo

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

export default someJson

poi

import someJson from './someJson'

Con json-loaderinstallato, puoi usare

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

o anche, ancora più semplicemente

import customData from '../customData';

Installare json-loader

npm install --save-dev json-loader

Archivia il tuo file JSON con l'estensione .js e assicurati che il tuo JSON si trovi nella stessa directory.

La soluzione che ha funzionato per me è che: - Ho spostato il mio file data.json da src alla directory pubblica. Quindi ha utilizzato l'API di recupero per recuperare il file

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);
    });

Il problema era che dopo aver compilato l'app React, la richiesta di recupero cerca il file nell'URL " http: // localhost: 3000 / data.json " che è in realtà la directory pubblica della mia app React . Ma sfortunatamente durante la compilazione, il file data.json dell'applicazione non viene spostato da src alla directory pubblica. Quindi dobbiamo spostare esplicitamente il file data.json da src alla directory pubblica.

prova con export default DATAo module.exports = DATA

// rinomina il file .json in .js e conservalo nella cartella src

Dichiara l'oggetto json come variabile

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

Esportalo usando module.exports

module.exports = customData;

Dal componente che ne ha bisogno, assicurati di eseguire il backup di due cartelle in profondità

import customData from '../customData';

ci sono diversi modi per farlo senza utilizzare alcun codice o librerie di terze parti (metodo consigliato).

1 ° MODO STATICO: crea un file .json quindi importalo nell'esempio del tuo componente React

il mio nome file è "example.json"

{"example" : "my text"}

la chiave di esempio all'interno di example.json può essere qualsiasi cosa, basta tenere a mente per usare le virgolette doppie per evitare problemi futuri.

Come importare nel componente React

import myJson from "jsonlocation";

e puoi usarlo ovunque come questo

myJson.example

ora ci sono alcune cose da considerare. Con questo metodo, sei costretto a dichiarare la tua importazione nella parte superiore della pagina e non puoi importare nulla dinamicamente.

E se volessimo importare dinamicamente i dati JSON? esempio un sito Web di supporto multilingue?

2 MODO DINAMICO

1 ° dichiara il tuo file JSON esattamente come il mio esempio sopra

ma questa volta stiamo importando i dati in modo diverso.

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

questo può accedere allo stesso modo.

ma aspetta dov'è il carico dinamico?

ecco come caricare dinamicamente il JSON

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

ora assicurati che tutti i tuoi file JSON si trovino nella stessa directory

qui puoi usare il JSON allo stesso modo del primo esempio

myJson.example

cosa è cambiato? il modo in cui importiamo perché è l'unica cosa di cui abbiamo veramente bisogno.

Spero che possa aiutare.

Questo ha funzionato bene in 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>

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;

Richiedilo nel tuo modulo:

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

Saluti