นำเข้าไฟล์ JSON ใน React

ฉันเพิ่งเริ่มใช้ React และฉันกำลังพยายามนำเข้าDATAตัวแปรJSON จากไฟล์ภายนอก ฉันได้รับข้อผิดพลาดต่อไปนี้:

ไม่พบโมดูล "./customData.json"

ใครช่วยฉันได้บ้าง ใช้งานได้ถ้าฉันมีDATAตัวแปรของฉันindex.jsแต่ไม่ใช่เมื่ออยู่ในไฟล์ 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

วิธีหนึ่งที่ดี (โดยไม่ต้องเพิ่มนามสกุล. js ปลอมซึ่งมีไว้สำหรับรหัสที่ไม่ใช่ข้อมูลและการกำหนดค่า) คือการใช้json-loaderโมดูล หากคุณเคยใช้create-react-appนั่งร้านโครงการของคุณโมดูลนั้นรวมอยู่แล้วคุณเพียงแค่นำเข้า json ของคุณ:

import Profile from './components/profile';

คำตอบนี้อธิบายเพิ่มเติม

เกาลัดแก่ ๆ นี้ ...

ในระยะสั้นคุณควรใช้ต้องใช้และปล่อยให้โหนดจัดการการแยกวิเคราะห์เป็นส่วนหนึ่งของการเรียกที่ต้องการไม่ใช่การเอาท์ซอร์สไปยังโมดูลของบุคคลที่สาม นอกจากนี้คุณควรดูแลให้คอนฟิกูเรชันของคุณกันกระสุนได้ซึ่งหมายความว่าคุณควรตรวจสอบข้อมูลที่ส่งคืนอย่างรอบคอบ

แต่เพื่อความกระชับให้พิจารณาตัวอย่างต่อไปนี้:

ตัวอย่างเช่นสมมติว่าฉันมีไฟล์ config 'admins.json' ในรูทของแอพของฉันที่มีสิ่งต่อไปนี้:

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

สังเกตคีย์ที่ยกมา"userName", "passSalted"!

ฉันสามารถทำสิ่งต่อไปนี้และนำข้อมูลออกจากไฟล์ได้อย่างง่ายดาย

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

ตอนนี้ข้อมูลอยู่ในและสามารถใช้เป็นวัตถุ (หรืออาร์เรย์) ปกติได้

แนวทางที่ง่ายที่สุดกำลังติดตาม

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

export default someJson

แล้ว

import someJson from './someJson'

เมื่อjson-loaderติดตั้งแล้วคุณสามารถใช้

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

หรือง่ายกว่านั้น

import customData from '../customData';

ติดตั้ง json-loader

npm install --save-dev json-loader

โปรดเก็บไฟล์ JSON ของคุณด้วยนามสกุล. js และตรวจสอบให้แน่ใจว่า JSON ของคุณควรอยู่ในไดเร็กทอรีเดียวกัน

วิธีแก้ปัญหาสำหรับฉันคือ: - ฉันย้ายไฟล์ data.json จาก src ไปยังไดเร็กทอรีสาธารณะ จากนั้นใช้ fetch API เพื่อดึงไฟล์

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

ปัญหาคือหลังจากรวบรวมแอป react แล้วคำขอดึงข้อมูลจะค้นหาไฟล์ที่ URL " http: // localhost: 3000 / data.json " ซึ่งเป็นไดเร็กทอรีสาธารณะของแอป react ของฉัน แต่น่าเสียดายในขณะที่รวบรวมไฟล์ react app data.json ไม่ได้ย้ายจาก src ไปยังไดเรกทอรีสาธารณะ ดังนั้นเราต้องย้ายไฟล์ data.json จาก src ไปยังไดเร็กทอรีสาธารณะอย่างชัดเจน

ลองด้วยexport default DATAหรือ module.exports = DATA

// เปลี่ยนชื่อไฟล์. json เป็น. js และเก็บไว้ในโฟลเดอร์ src

ประกาศวัตถุ json เป็นตัวแปร

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

ส่งออกโดยใช้ module.exports

module.exports = customData;

จากส่วนประกอบที่ต้องการตรวจสอบให้แน่ใจว่าได้สำรองข้อมูลสองโฟลเดอร์ไว้ลึก ๆ

import customData from '../customData';

มีหลายวิธีในการดำเนินการนี้โดยไม่ต้องใช้รหัสหรือไลบรารีของบุคคลที่สาม (วิธีที่แนะนำ)

วิธีที่ 1 STATIC WAY: สร้างไฟล์. json จากนั้นนำเข้าในตัวอย่างส่วนประกอบปฏิกิริยาของคุณ

ชื่อไฟล์ของฉันคือ "example.json"

{"example" : "my text"}

คีย์ตัวอย่างภายใน example.json อาจเป็นอะไรก็ได้ แต่อย่าลืมใช้เครื่องหมายคำพูดคู่เพื่อป้องกันปัญหาในอนาคต

วิธีการนำเข้าในส่วนประกอบปฏิกิริยา

import myJson from "jsonlocation";

และคุณสามารถใช้งานได้ทุกที่เช่นนี้

myJson.example

ตอนนี้มีบางสิ่งที่ต้องพิจารณา ด้วยวิธีนี้คุณจะต้องประกาศการนำเข้าของคุณที่ด้านบนของหน้าและไม่สามารถนำเข้าสิ่งใดแบบไดนามิกได้

ทีนี้ถ้าเราต้องการนำเข้าข้อมูล JSON แบบไดนามิกล่ะ? ตัวอย่างเว็บไซต์สนับสนุนหลายภาษา?

2 ทางแบบไดนามิก

ขั้นแรกประกาศไฟล์ JSON ของคุณเหมือนกับตัวอย่างของฉันด้านบน

แต่คราวนี้เรากำลังนำเข้าข้อมูลต่างออกไป

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

ซึ่งสามารถเข้าถึงได้ในลักษณะเดียวกัน

แต่รอว่าไดนามิกโหลดอยู่ที่ไหน

นี่คือวิธีโหลด JSON แบบไดนามิก

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

ตอนนี้ตรวจสอบให้แน่ใจว่าไฟล์ JSON ทั้งหมดของคุณอยู่ในไดเร็กทอรีเดียวกัน

ที่นี่คุณสามารถใช้ JSON ในลักษณะเดียวกับตัวอย่างแรก

myJson.example

มีอะไรเปลี่ยนแปลง? วิธีที่เรานำเข้าเนื่องจากเป็นสิ่งเดียวที่เราต้องการจริงๆ

ฉันหวังว่านี่จะช่วยได้.

สิ่งนี้ใช้ได้ดีใน 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;

ต้องการในโมดูลของคุณ:

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

ความนับถือ