2日以来問題があります。 React react-appで作成したアプリケーション)のパブリックフォルダーからローカルJSONを読みたい.
これは私のプロジェクト構造です:
公衆
データ
src
コンポーネント
ファイルを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ファイルをローカルで読み取る方法を誰かが知っている場合は、感謝しています。
私はあなたのフェッチ引数が間違っていると思います。そのはず
fetch('data/mato.json')
データファイルがパブリックフォルダーに配置されている限り、Chromeでも私のプロジェクトと同様に機能するはずです。そのため、fetch( 'data/mato.json')で十分です。