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

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

ไม่สามารถหามอดูล "./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

คำตอบ #1

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

import Profile from './components/profile';

ดูคำตอบนี้สำหรับรายละเอียดเพิ่มเติม

คำตอบ #2

เรื่องเก่าๆ นี้...

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

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

ตัวอย่างเช่น สมมติว่าฉันมีไฟล์คอนฟิกชื่อ 'admins.json' อยู่ในรูทของแอปของฉันซึ่งมีเนื้อหาดังต่อไปนี้:

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

สังเกตคีย์ที่มีเครื่องหมายอัญประกาศ, "userName", "passSalted"!

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

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

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

คำตอบ #3

React 17 ที่สร้างจาก create-react-app การนำเข้า json จะใช้งานได้โดยค่าเริ่มต้น

import config from './config.json'

คำตอบ #4

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

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

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

import customData from '../customData';

เพื่อติดตั้ง json-loader

npm install --save-dev json-loader

คำตอบ #5

วิธีที่ง่ายที่สุดคือดังต่อไปนี้

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

export default someJson

แล้ว

import someJson from './someJson'

คำตอบ #6

วิธีแก้ปัญหาที่ใช้ได้ผลสำหรับฉันคือ:- ฉันย้ายไฟล์ data.json ของฉันจากโฟลเดอร์ src ไปที่โฟลเดอร์ public จากนั้นใช้ 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 คำขอ fetch จะไปหไฟล์ที่ URL "http://localhost:3000/data.json" ซึ่งจริงๆ แล้วเป็นไดเรกทอรี public ของแอป React ของฉัน แต่โชคร้ายที่ระหว่างการคอมไพล์แอป React ไฟล์ data.json จะไม่ถูกย้ายจาก src ไปยังไดเรกทอรี public ดังนั้นเราจำเป็นต้องย้ายไฟล์ data.json จาก src ไปยังไดเรกทอรี public ด้วยตัวเอง

คำตอบ #7

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

คำตอบ #8

ในเวอร์ชัน React ปัจจุบัน คุณเพียงแค่อิมพอร์ตและใช้งาน:

import jsonData from 'path/to/myJson.json'