Create-React-AppパブリックフォルダJSON

Question

この正確な質問に答えられません。 data.JSONファイルを私の/ publicフォルダに入れたいのですが、一旦サイトが構築されると、サイトを再構築することなく素早く変更することができます。しかし、私はこれをどのように反応させるかについて苦労しています。私はREADMEの指示に従ってみましたが、少し不明です。

私がしようとした場合：

class Home extends Component { 
     render() { 
     const data = require(`${process.env.PUBLIC_URL}/data.json`); 

私はコンパイルのメッセージが表示されます。

./src/Home.js 
    Module not found: You attempted to import /data.json which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/. 

それを含めるための適切な方法は何ですか？私はpublic/index.htmlのwindow.DATAに書き込むことでハッキリとした方法を試みましたが、非同期（そうでなければクロムは私にエラーを与えます）と呼ぶ必要があると信じているので時々データがそこにあります。それが好きではないようです。コードを試しました：

var request = new XMLHttpRequest(); 
request.open("GET", "%PUBLIC_URL%/data.json", true); 
request.send(null); 
request.onreadystatechange = function() { 
    if (request.readyState === 4 && request.status === 200) { 
    window.DATA = JSON.parse(request.responseText); 
    } 
} 

助けてください。

Answer 1

あなたの最初のソルティReactはソースフォルダの外にあるものにはアクセス権を与えてはならないので、パブリックフォルダにファイルを置く必要がある場合は、onは機能しません。それ以外の場合は、悪いコードが人々のアクセスフォルダc：\ windowsを許可する可能性があると想像することができます

2番目の解決策は行くことができるが、コールバックでちょっとした作業が必要です。あなたのプロジェクトが作成反応し、アプリ内で起動した場合、あなたは

import React, { Component } from 'react'; 

class App extends Component { 
    render() { 
    return (
     <div> 
      <h2>{JSON.parse(this.props.appData).Name}</h2> 
     </div> 
    ); 
    } 
} 

export default App; 

として

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 

var xhttp = new XMLHttpRequest(); 
var data = {}; 
xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     // Typical action to be performed when the document is ready: 
     data = JSON.parse(xhttp.responseText); 
     ReactDOM.render(<App appData={JSON.stringify(data)}/>, document.getElementById('root')); 
    } 
}; 

xhttp.open("GET", `${process.env.PUBLIC_URL}/data.json`, true); 
xhttp.send(); 

としてindex.jsを配置し、あなたのApp.jsすることができます私は、パブリックフォルダにdata.json入れ、そして私はこのようなオブジェクトを持っている：

{ 
    "Name": "My App" 
} 

Answer 2

あなたは、単にこのようにそれを行うことができます。

mydata.js

export default { 
    myStuff: [ "one","two","three"] 
} 

はあなたのコードではあなたが今と呼ばれる変数にデータを持っている

import myData from './mydata.js' 

myData