web-dev-qa-db-ja.com

パブリックフォルダーReactJSからローカルJSONファイルを取得する

2日以来問題があります。 React react-appで作成したアプリケーション）のパブリックフォルダーからローカルJSONを読みたい.

これは私のプロジェクト構造です：

  • 公衆

    • データ

      • mato.json（私の.JSONファイル）

  • src

    • コンポーネント

      • App.js

ファイルをpublicフォルダーに配置する理由srcフォルダー内のファイルを使用してプロジェクトをビルドすると、ファイルはコマンド_main.js_によって生成された_yarn build_に含まれます。

常にアプリを再ビルドせずにjsonファイルを変更したい。

したがって、次のようなコードは使用できません。

_import Data from './mato.json'
_

…または：

_export default { 'mydata' : 'content of mato.json'}
import data from 'mydata';
_

私は.jsonファイルをフェッチしようとしましたが、「ファイルスキーム」はfetch()＆chromeとは異なります。

（Chromeエラー：「index.js：6 Fetch APIはfile：/// D：/projects/data/mato.jsonを読み込めません。URLスキーム "file"はサポートされていません。」）

これはフェッチのための私のコードです：

_fetch(`${process.env.PUBLIC_URL}/data/mato.json`)
.then((r) => r.json())
.then((data) =>{
    ReactDOM.render(<App appData={JSON.stringify(data)}/>, document.getElementById('root'));
})
_

Firefoxでのみ機能します。また、_mode: 'cors'_を試しましたが、良くありません。

もちろん、サーバーもありません。ローカルプロジェクトです。そのため、JSONファイルをローカルで読み取る方法を誰かが知っている場合は、感謝しています。

javascriptjsonreactjslocalfetch-api
9
Kevin

私はあなたのフェッチ引数が間違っていると思います。そのはず

fetch('data/mato.json')
8
Quentin

データファイルがパブリックフォルダーに配置されている限り、Chromeでも私のプロジェクトと同様に機能するはずです。そのため、fetch（ 'data/mato.json'）で十分です。

3
Lex Soft