Importar archivo JSON en React

Soy nuevo en React y estoy tratando de importar una DATAvariable JSON desde un archivo externo. Recibo el siguiente error:

No se puede encontrar el módulo "./customData.json"

¿Alguien podría ayudarme? Funciona si tengo mi DATAvariable dentro, index.jspero no cuando está en un archivo JSON externo.

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

Una buena forma (sin agregar una extensión .js falsa que es para código, no para datos y configuraciones) es usar json-loadermodule. Si ha utilizado create-react-appcomo andamio su proyecto, el módulo ya está incluido, solo necesita importar su json:

import Profile from './components/profile';

Esta respuesta explica más.

Esta vieja castaña ...

En resumen, debe utilizar require y dejar que el nodo maneje el análisis como parte de la llamada require, no subcontratarlo a un módulo de terceros. También debe tener cuidado de que sus configuraciones sean a prueba de balas, lo que significa que debe verificar los datos devueltos cuidadosamente.

Pero en aras de la brevedad, considere el siguiente ejemplo:

Por ejemplo, digamos que tengo un archivo de configuración 'admins.json' en la raíz de mi aplicación que contiene lo siguiente:

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

Tenga en cuenta las claves citadas, "userName", "passSalted"!

Puedo hacer lo siguiente y sacar los datos del archivo con facilidad.

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

Ahora los datos están adentro y se pueden usar como un objeto regular (o matriz de).

Con json-loaderinstalado, puede usar

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

o también, aún más simplemente

import customData from '../customData';

Instalar json-loader

npm install --save-dev json-loader

El enfoque más simple está siguiendo

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

export default someJson

entonces

import someJson from './someJson'

Guarde su archivo JSON con la extensión .js y asegúrese de que su JSON esté en el mismo directorio.

La solución que funcionó para mí es que: - Moví mi archivo data.json de src al directorio público. Luego usó la API de recuperación para recuperar el archivo

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

El problema fue que después de compilar la aplicación de reacción, la solicitud de recuperación busca el archivo en la URL " http: // localhost: 3000 / data.json ", que en realidad es el directorio público de mi aplicación de reacción. Pero desafortunadamente, mientras se compila el archivo react app data.json no se mueve de src al directorio público. Entonces tenemos que mover explícitamente el archivo data.json desde src al directorio público.

prueba con export default DATAo module.exports = DATA

// cambiar el nombre del archivo .json a .js y mantenerlo en la carpeta src

Declare el objeto json como una variable

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

Exportarlo usando module.exports

module.exports = customData;

Del componente que lo necesita, asegúrese de retroceder dos carpetas de profundidad

import customData from '../customData';

Esto funcionó bien en 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>

Hay varias formas de hacer esto sin utilizar ningún código o bibliotecas de terceros (la forma recomendada).

1st STATIC WAY: cree un archivo .json y luego impórtelo en su ejemplo de componente de reacción

mi nombre de archivo es "ejemplo.json"

{"example" : "my text"}

la clave de ejemplo dentro de example.json puede ser cualquier cosa, solo tenga en cuenta que debe usar comillas dobles para evitar problemas futuros.

Cómo importar en el componente react

import myJson from "jsonlocation";

y puedes usarlo en cualquier lugar como este

myJson.example

ahora hay algunas cosas a considerar. Con este método, se ve obligado a declarar su importación en la parte superior de la página y no puede importar nada dinámicamente.

Ahora, ¿qué pasa si queremos importar dinámicamente los datos JSON? ejemplo, un sitio web de soporte en varios idiomas?

2 VÍA DINÁMICA

Primero declare su archivo JSON exactamente como mi ejemplo anterior

pero esta vez estamos importando los datos de manera diferente.

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

este puede acceder de la misma manera.

pero espera, ¿dónde está la carga dinámica?

aquí es cómo cargar el JSON dinámicamente

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

ahora asegúrese de que todos sus archivos JSON estén dentro del mismo directorio

aquí puede usar JSON de la misma manera que en el primer ejemplo

myJson.example

¿Qué cambió? la forma en que importamos porque es lo único que realmente necesitamos.

Espero que esto ayude.

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;

Requerirlo en su módulo:

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

Saludos