Impor file JSON di React

Saya baru mengenal React dan saya mencoba mengimpor DATAvariabel JSON dari file eksternal. Saya mendapatkan kesalahan berikut:

Tidak dapat menemukan modul "./customData.json"

Bisakah seseorang membantu saya? Ini berfungsi jika saya memiliki DATAvariabel saya index.jstetapi tidak ketika berada di file JSON eksternal.

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

Salah satu cara yang bagus (tanpa menambahkan ekstensi .js palsu yang untuk kode bukan untuk data dan konfigurasi) adalah dengan menggunakan json-loadermodul. Jika Anda pernah menggunakan create-react-appscaffold proyek Anda, modul sudah disertakan, Anda hanya perlu mengimpor json Anda:

import Profile from './components/profile';

Jawaban ini menjelaskan lebih lanjut.

Kacang tua ini ...

Singkatnya, Anda harus menggunakan require dan membiarkan node menangani penguraian sebagai bagian dari panggilan require, bukan mengalihkannya ke modul pihak ketiga. Anda juga harus berhati-hati bahwa konfigurasi Anda antipeluru, yang berarti Anda harus memeriksa data yang dikembalikan dengan hati-hati.

Tapi demi singkatnya, perhatikan contoh berikut:

Sebagai Contoh, katakanlah saya memiliki file konfigurasi 'admins.json' di root aplikasi saya yang berisi berikut ini:

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

Perhatikan kunci-kunci yang dikutip "userName",, "passSalted"!

Saya dapat melakukan hal berikut dan mendapatkan data dari file dengan mudah.

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

Sekarang data sudah masuk dan dapat digunakan sebagai objek biasa (atau larik).

Dengan json-loaderterinstal, Anda dapat menggunakan

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

atau juga, bahkan lebih sederhana

import customData from '../customData';

Untuk memasang json-loader

npm install --save-dev json-loader

Pendekatan paling sederhana mengikuti

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

export default someJson

kemudian

import someJson from './someJson'

Harap simpan file JSON Anda dengan ekstensi .js dan pastikan JSON Anda berada di direktori yang sama.

Solusi yang berhasil untuk saya adalah: - Saya memindahkan file data.json saya dari src ke direktori publik. Kemudian gunakan fetch API untuk mengambil 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);
    });

Masalahnya adalah setelah menyusun aplikasi react, permintaan pengambilan mencari file di URL " http: // localhost: 3000 / data.json " yang sebenarnya merupakan direktori publik dari aplikasi react saya. Namun sayangnya saat menyusun file react app data.json tidak dipindahkan dari src ke direktori publik. Jadi kita harus memindahkan file data.json secara eksplisit dari src ke direktori publik.

coba dengan export default DATAatau module.exports = DATA

// ganti nama file .json menjadi .js dan simpan di folder src

Deklarasikan objek json sebagai variabel

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

Ekspor menggunakan module.exports

module.exports = customData;

Dari komponen yang membutuhkannya, pastikan untuk memundurkan dua folder

import customData from '../customData';

Ini bekerja dengan baik 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>

ada beberapa cara untuk melakukan ini tanpa menggunakan kode atau pustaka pihak ketiga (cara yang disarankan).

CARA STATIK 1: buat file .json kemudian impor dalam contoh komponen react Anda

nama file saya adalah "example.json"

{"example" : "my text"}

kunci contoh di dalam example.json bisa berupa apa saja, hanya perlu diingat untuk menggunakan tanda kutip ganda untuk mencegah masalah di masa mendatang.

Cara mengimpor komponen react

import myJson from "jsonlocation";

dan Anda dapat menggunakannya di mana saja seperti ini

myJson.example

sekarang ada beberapa hal yang perlu dipertimbangkan. Dengan metode ini, Anda dipaksa untuk mendeklarasikan impor Anda di bagian atas halaman dan tidak dapat mengimpor apa pun secara dinamis.

Sekarang, bagaimana jika kita ingin mengimpor data JSON secara dinamis? contoh situs web dukungan multi-bahasa?

2 CARA DINAMIS

Pertama deklarasikan file JSON Anda persis seperti contoh saya di atas

tapi kali ini kami mengimpor data secara berbeda.

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

ini dapat mengakses dengan cara yang sama.

tapi tunggu di mana beban dinamisnya?

berikut adalah cara memuat JSON secara dinamis

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

sekarang pastikan semua file JSON Anda berada dalam direktori yang sama

di sini Anda dapat menggunakan JSON dengan cara yang sama seperti contoh pertama

myJson.example

apa yang berubah? cara kami mengimpor karena itulah satu-satunya hal yang benar-benar kami butuhkan.

Saya harap ini membantu.

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;

Membutuhkannya dalam modul Anda:

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

salam