Importuj plik JSON w React

Jestem nowy w React i próbuję zaimportować DATAzmienną JSON z zewnętrznego pliku. Otrzymuję następujący błąd:

Nie można znaleźć modułu „./customData.json”

Czy ktoś mógłby mi pomóc? Działa, jeśli mam moją DATAzmienną, index.jsale nie, gdy jest w zewnętrznym pliku JSON.

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

Jednym fajnym sposobem (bez dodawania fałszywego rozszerzenia .js, które jest przeznaczone dla kodu, a nie dla danych i konfiguracji) jest użycie json-loadermodule. Jeśli create-react-appużywałeś szkieletu swojego projektu, moduł jest już dołączony, wystarczy zaimportować plik json:

import Profile from './components/profile';

Ta odpowiedź wyjaśnia więcej.

Ten stary kasztan ...

Krótko mówiąc, powinieneś używać wymagania i zezwalania węzłowi na obsługę parsowania w ramach wywołania żądania, a nie outsourcingu do modułu strony trzeciej. Powinieneś również uważać, aby twoje konfiguracje były kuloodporne, co oznacza, że ​​powinieneś dokładnie sprawdzić zwracane dane.

Ale ze względu na zwięzłość rozważ następujący przykład:

Na przykład, powiedzmy, że mam plik konfiguracyjny „admins.json” w katalogu głównym mojej aplikacji zawierający następujące elementy:

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

Należy zwrócić uwagę na podane klucze "userName", "passSalted"!

Mogę wykonać następujące czynności iz łatwością wyciągnąć dane z pliku.

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

Teraz dane są zapisane i mogą być używane jako zwykły (lub tablica) obiekt.

Po json-loaderzainstalowaniu możesz użyć

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

lub jeszcze prościej

import customData from '../customData';

Żeby zainstalować json-loader

npm install --save-dev json-loader

Najprostsze podejście to podążanie

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

export default someJson

następnie

import someJson from './someJson'

Zapisz plik JSON z rozszerzeniem .js i upewnij się, że plik JSON powinien znajdować się w tym samym katalogu.

Rozwiązanie, które zadziałało, jest następujące: - Przeniosłem plik data.json z src do katalogu publicznego. Następnie użył Fetch API do pobrania pliku

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

Problem polegał na tym, że po skompilowaniu aplikacji React żądanie pobierania szukało pliku pod adresem URL „ http: // localhost: 3000 / data.json ”, który w rzeczywistości jest katalogiem publicznym mojej aplikacji. Niestety, podczas kompilacji pliku react app data.json nie jest przenoszony z src do katalogu publicznego. Musimy więc jawnie przenieść plik data.json z src do katalogu publicznego.

spróbuj z export default DATAlub module.exports = DATA

// zmień nazwę pliku .json na .js i pozostaw w folderze src

Zadeklaruj obiekt JSON jako zmienną

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

Wyeksportuj go za pomocą module.exports

module.exports = customData;

Z komponentu, który tego potrzebuje, pamiętaj o wycofaniu dwóch folderów głęboko

import customData from '../customData';

To działało dobrze 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>

można to zrobić na wiele sposobów bez korzystania z kodu lub bibliotek innych firm (metoda zalecana).

1. SPOSÓB STATYCZNY: utwórz plik .json, a następnie zaimportuj go do przykładu reagującego komponentu

moja nazwa pliku to „example.json”

{"example" : "my text"}

Przykładowy klucz w example.json może być wszystkim, o czym pamiętaj, aby użyć podwójnych cudzysłowów, aby zapobiec przyszłym problemom.

Jak zaimportować w części reagującej

import myJson from "jsonlocation";

i możesz go używać wszędzie w ten sposób

myJson.example

teraz jest kilka rzeczy do rozważenia. Dzięki tej metodzie jesteś zmuszony zadeklarować swój import u góry strony i nie możesz dynamicznie importować niczego.

A co jeśli chcemy dynamicznie importować dane JSON? przykład wielojęzycznej witryny pomocy technicznej?

2 DYNAMIC WAY

1. zadeklaruj swój plik JSON dokładnie tak, jak w powyższym przykładzie

ale tym razem importujemy dane inaczej.

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

to może uzyskać dostęp w ten sam sposób.

ale poczekaj, gdzie jest obciążenie dynamiczne?

oto jak dynamicznie ładować JSON

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

teraz upewnij się, że wszystkie twoje pliki JSON znajdują się w tym samym katalogu

tutaj możesz użyć JSON w taki sam sposób jak w pierwszym przykładzie

myJson.example

co się zmieniło? sposób importu, ponieważ jest to jedyna rzecz, której naprawdę potrzebujemy.

Mam nadzieję, że to pomoże.

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;

Wymagaj tego w swoim module:

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

pozdrowienia