Nhập tệp JSON trong React

Tôi mới sử dụng React và tôi đang cố gắng nhập một DATAbiến JSON từ một tệp bên ngoài. Tôi gặp lỗi sau:

Không thể tìm thấy mô-đun "./customData.json"

Ai đó có thể giúp tôi? Nó hoạt động nếu tôi có DATAbiến của mình trong index.jsnhưng không hoạt động khi nó ở trong tệp JSON bên ngoài.

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

Một cách hay (mà không cần thêm phần mở rộng .js giả dành cho mã không dành cho dữ liệu và cấu hình) là sử dụng json-loadermô-đun. Nếu bạn đã từng create-react-applàm dàn dựng cho dự án của mình, thì mô-đun đã được bao gồm, bạn chỉ cần nhập json của mình:

import Profile from './components/profile';

Câu trả lời này giải thích thêm.

Hạt dẻ già này ...

Nói tóm lại, bạn nên sử dụng request và để nút xử lý phân tích cú pháp như một phần của lệnh gọi request, chứ không phải thuê ngoài mô-đun bên thứ ba. Bạn cũng nên chú ý rằng cấu hình của bạn có khả năng chống đạn, có nghĩa là bạn nên kiểm tra dữ liệu trả về một cách cẩn thận.

Nhưng để ngắn gọn, hãy xem xét ví dụ sau:

Ví dụ: giả sử tôi có một tệp cấu hình 'admin.json' trong thư mục gốc của ứng dụng của tôi có chứa thông tin sau:

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

Lưu ý các phím được trích dẫn, "userName", "passSalted"!

Tôi có thể làm như sau và lấy dữ liệu ra khỏi tệp một cách dễ dàng.

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

Bây giờ dữ liệu đã ở trong và có thể được sử dụng như một đối tượng (hoặc một mảng) thông thường.

Sau khi json-loadercài đặt, bạn có thể sử dụng

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

hoặc đơn giản hơn nữa

import customData from '../customData';

Để cài đặt json-loader

npm install --save-dev json-loader

Cách tiếp cận đơn giản nhất đang theo dõi

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

export default someJson

sau đó

import someJson from './someJson'

Vui lòng lưu trữ tệp JSON của bạn với phần mở rộng .js và đảm bảo rằng JSON của bạn phải nằm trong cùng một thư mục.

Giải pháp phù hợp với tôi là: - Tôi đã di chuyển tệp data.json của mình từ src sang thư mục chung. Sau đó, sử dụng API tìm nạp để tìm nạp tệp

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

Vấn đề là sau khi biên dịch ứng dụng phản ứng, yêu cầu tìm nạp sẽ tìm tệp tại URL " http: // localhost: 3000 / data.json ", đây thực sự là thư mục công khai của ứng dụng phản ứng của tôi. Nhưng rất tiếc trong khi biên dịch tệp react app data.json không được chuyển từ src sang thư mục chung. Vì vậy, chúng ta phải di chuyển rõ ràng tệp data.json từ src sang thư mục chung.

thử với export default DATAhoặc module.exports = DATA

// đổi tên tệp .json thành .js và giữ trong thư mục src

Khai báo đối tượng json dưới dạng một biến

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

Xuất nó bằng module.exports

module.exports = customData;

Từ thành phần cần nó, hãy đảm bảo sao lưu sâu hai thư mục

import customData from '../customData';

Điều này hoạt động tốt trong 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>

có nhiều cách để thực hiện việc này mà không cần sử dụng bất kỳ mã hoặc thư viện của bên thứ ba nào (cách được khuyến nghị).

CÁCH THỐNG KÊ thứ nhất: tạo tệp .json sau đó nhập tệp đó vào ví dụ về thành phần phản ứng của bạn

tên tệp của tôi là "example.json"

{"example" : "my text"}

khóa ví dụ bên trong example.json có thể là bất kỳ thứ gì chỉ cần lưu ý sử dụng dấu ngoặc kép để ngăn chặn các vấn đề trong tương lai.

Cách nhập trong thành phần phản ứng

import myJson from "jsonlocation";

và bạn có thể sử dụng nó ở bất cứ đâu như thế này

myJson.example

bây giờ có một số điều cần xem xét. Với phương pháp này, bạn buộc phải khai báo việc nhập của mình ở đầu trang và không thể nhập động bất cứ thứ gì.

Bây giờ, nếu chúng ta muốn nhập động dữ liệu JSON thì sao? ví dụ một trang web hỗ trợ nhiều ngôn ngữ?

2 CÁCH NĂNG ĐỘNG

Đầu tiên hãy khai báo tệp JSON của bạn chính xác như ví dụ của tôi ở trên

nhưng lần này chúng tôi nhập dữ liệu theo cách khác.

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

điều này có thể truy cập theo cùng một cách.

nhưng đợi tải động ở đâu?

đây là cách tải động JSON

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

bây giờ hãy đảm bảo rằng tất cả các tệp JSON của bạn đều nằm trong cùng một thư mục

ở đây bạn có thể sử dụng JSON theo cách giống như ví dụ đầu tiên

myJson.example

những gì đã thay đổi? cách chúng tôi nhập khẩu vì đó là thứ duy nhất chúng tôi thực sự cần.

Tôi hi vọng cái này giúp được.

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;

Yêu cầu nó trong mô-đun của bạn:

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

Trân trọng