Importar arquivo JSON no React

Sou novo no React e estou tentando importar uma DATAvariável JSON de um arquivo externo. Estou recebendo o seguinte erro:

Não é possível encontrar o módulo "./customData.json"

Alguém poderia me ajudar? Funciona se eu tiver minha DATAvariável, index.jsmas não quando ela estiver em um arquivo 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

Uma boa maneira (sem adicionar uma extensão .js falsa, que é para código, não para dados e configurações) é usar o json-loadermódulo. Se você costumava create-react-appfazer o scaffold de seu projeto, o módulo já está incluído, você só precisa importar seu json:

import Profile from './components/profile';

Esta resposta explica mais.

Esta velha castanha ...

Resumindo, você deve usar require e deixar o nó lidar com a análise como parte da chamada require, não terceirizando-a para um módulo de terceiros. Você também deve tomar cuidado para que suas configurações sejam à prova de balas, o que significa que você deve verificar os dados retornados com cuidado.

Mas por uma questão de brevidade, considere o seguinte exemplo:

Por exemplo, digamos que eu tenha um arquivo de configuração 'admins.json' na raiz do meu aplicativo contendo o seguinte:

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

Observe as chaves citadas, "userName", "passSalted"!

Posso fazer o seguinte e obter os dados do arquivo com facilidade.

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

Agora os dados estão inseridos e podem ser usados ​​como um objeto regular (ou matriz de).

A abordagem mais simples é seguir

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

export default someJson

então

import someJson from './someJson'

Com json-loaderinstalado, você pode usar

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

ou também, ainda mais simplesmente

import customData from '../customData';

Para instalar json-loader

npm install --save-dev json-loader

Armazene seu arquivo JSON com a extensão .js e certifique-se de que seu JSON deve estar no mesmo diretório.

A solução que funcionou para mim é: - Mudei meu arquivo data.json de src para o diretório público. Em seguida, usei fetch API para buscar o arquivo

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

O problema é que, após compilar o app react, a solicitação de busca procura o arquivo na URL " http: // localhost: 3000 / data.json ", que na verdade é o diretório público do meu app react. Mas, infelizmente, durante a compilação do arquivo react app data.json não é movido do src para o diretório público. Portanto, temos que mover explicitamente o arquivo data.json do diretório src para o público.

tente com export default DATAou module.exports = DATA

// renomeie o arquivo .json para .js e mantenha na pasta src

Declare o objeto json como uma variável

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

Exporte-o usando module.exports

module.exports = customData;

Do componente que precisa, certifique-se de restaurar duas pastas de profundidade

import customData from '../customData';

existem várias maneiras de fazer isso sem usar qualquer código ou bibliotecas de terceiros (a maneira recomendada).

1ª FORMA ESTÁTICA: crie um arquivo .json e importe-o em seu exemplo de componente react

meu nome de arquivo é "example.json"

{"example" : "my text"}

a chave de exemplo dentro de example.json pode ser qualquer coisa, apenas lembre-se de usar aspas duplas para evitar problemas futuros.

Como importar no componente de reação

import myJson from "jsonlocation";

e você pode usá-lo em qualquer lugar como este

myJson.example

agora, existem algumas coisas a serem consideradas. Com este método, você é forçado a declarar sua importação no topo da página e não pode importar nada dinamicamente.

Agora, e se quisermos importar dinamicamente os dados JSON? exemplo um site de suporte multilíngue?

2 MANEIRA DINÂMICA

Primeiro declare seu arquivo JSON exatamente como meu exemplo acima

mas desta vez estamos importando os dados de forma diferente.

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

isso pode acessar da mesma maneira.

mas espere onde está a carga dinâmica?

aqui está como carregar o JSON dinamicamente

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

agora certifique-se de que todos os seus arquivos JSON estão no mesmo diretório

aqui você pode usar o JSON da mesma forma que no primeiro exemplo

myJson.example

o que mudou? a forma como importamos porque é a única coisa de que realmente precisamos.

Eu espero que isso ajude.

Isso funcionou bem em 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;

Exigir em seu módulo:

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

Saudações