javascript - helmet - Importar archivo JSON en React

leaflet ajax

Question

Soy nuevo en React y estoy intentando importar una variable JSON DATA desde un archivo externo. Estoy recibiendo el siguiente error:

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

¿Alguien podría ayudarme? Funciona si tengo mi variable DATA en index.js pero no cuando está en un archivo JSON externo.

index.js

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'')); hobbies.js

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; perfil.js

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 customData.json

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

export default DATA

Answer 1

// renombrar el archivo .json a .js y mantenerlo en la carpeta src

Declara el objeto json como una variable

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

Exportarlo utilizando module.exports

module.exports = customData;

Desde el componente que lo necesita, asegúrese de realizar una copia de seguridad de dos carpetas.

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

Answer 2

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

Answer 3

Con json-loader instalado, puedes usar

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

O también, más sencillamente.

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

Para instalar json-loader

npm install --save-dev json-loader

Answer 4

Esta vieja castaña ...

En resumen, debe usar require y dejar que el nodo maneje el análisis como parte de la llamada a require, no externalizarlo 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 cuidadosamente los datos devueltos.

Pero por razones de 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:

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

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

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

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

Answer 5

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

import Profile from ''./components/profile'';

This respuesta explica más.

Answer 6

intente con la export default DATA o module.exports = DATA