javascript - Importer JSON-fil i React

Jeg er ny på React og prøver å importere en JSON-variabel DATA fra en ekstern fil. Jeg får følgende feil:

Kan ikke finne modul "./customData.json"

Kan noen hjelpe meg? Det fungerer hvis jeg har min DATA-variabel i index.js, men ikke når den er i en ekstern JSON-fil.

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

Svar #1

En fin måte å gjøre dette på ville være å bruke json-loader-modulen. På denne måten trenger du ikke å legge til en falsk .js-utvidelse (som er ment for kode snarere enn data/konfigurasjon). Denne modulen er allerede inkludert i create-react-app og Webpack 2.x+ (nåværende versjon er 5.x), så hvis du bruker noen av disse verktøyene, kan du enkelt importere ditt json uten ekstra konfigurasjoner/avhengigheter:

import Profile from './components/profile';

Se dette svaret for flere detaljer.

Svar #2

Dette gamle kastanjetreet...

Kort sagt bør du bruke require og la node håndtere parseprosessen som en del av require-kallet, i stedet for å overlate det til en tredjepartsmodul. Du bør også sørge for at konfigurasjonene dine er idiotsikre, noe som betyr at du bør sjekke de returnerte dataene nøye.

Men for korthets skyld, vurder følgende eksempel:

For eksempel, la oss si at jeg har en konfigurasjonsfil 'admins.json' i roten av appen min som inneholder følgende:

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

Merk de siterte nøklene, "userName", "passSalted"!

Jeg kan gjøre følgende og hente ut dataene fra filen med letthet.

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

Nå er dataene inne og kan brukes som et vanlig (eller en rekke av) objekt.

Svar #3

React 17 opprettet fra create-react-app, importing av json fungerer bare som standard.

import config from './config.json'

Svar #4

Med json-loader installert, kan du bruke

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

eller også, enda enklere

import customData from '../customData';

For å installere json-loader

npm install --save-dev json-loader

Svar #5

Den enkleste tilnærmingen er følgende

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

export default someJson

så

import someJson from './someJson'

Svar #6

Løsningen som fungerte for meg er at: - Jeg flyttet data.json-filen min fra src til public-mappen. Deretter brukte jeg fetch API for å hente filen

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

Problemet var at etter å ha kompilert react-appen ser fetch-forespørselen etter filen på URL-en "http://localhost:3000/data.json", som faktisk er public-katalogen i react-appen min. Men dessverre blir ikke data.json-filen flyttet fra src til public-katalogen under kompilering av react-appen. Så vi må eksplisitt flytte data.json-filen fra src til public-katalogen.

Svar #7

Vennligst lagre JSON-filen din med .js-utvidelsen og sørg for at JSON-filen din er i samme katalog.

Svar #8

I den nåværende React-versjonen importerer du ganske enkelt og bruker:

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

Relaterte artikler