ローカルJSONファイルに対するフェッチ要求で、JSONファイルではなくindex.htmlが返されます

Question

reactおよびfetchを使用して予期しない動作が発生しています。それは非常にストレートでなければなりません。

私のコードは次のようになります。私はそれは私には意味がありませんindex.htmlページを要求しているネットワークをチェックすると

import React, { Component } from 'react'; 

class App extends Component { 

    componentDidMount() { 
    fetch('/dict.json') 
    .then(res => res.json()) 
    .then(json => console.log(json)) 
    } 

render() { 
    return (
    <p>Example</p> 
    ); 
    } 
} 

と私のフォルダ構造は、この

- src 
    |_app.js 
    |_dict.json 
- index.html 

のように見えます。誰もこれを経験したことがありますか？

Answer 1

生産：このコードは、あなたがJSONファイルは、しかし、あなたが代わりにローカルのJSONファイルをインポートすることができることをサーブするためのセットアップWebサーバーを持っていない限りfetchがここで仕事に行くのではありません、その後の生産で実行しようとしている場合：

その後

import dict from './_dict.json'; 

ごcomponentDidMountあなただけのローカルホスト

let results = dict.map((item, index) => { 
    // ... 
}); 

それ以上

をマッピングすることができるの内側：あなただけのWA場合ローカルホスト上でこれを実行するには、なぜ私はそれが動作しないのかわかりませんし、私が疑うところは、あなたのReactアプリケーションはローカルWebサーバにHTTPリクエストをプロキシしています（Reactjs開発では非常に一般的です）、ローカルWebサーバーがJSONファイルを処理するようにセットアップされていないことを確認してください。

"proxy": "http://localhost:8080" 

そして、要求に応じて、あなたのJSONファイルを提供するために、そのポート上で実行されているWebサーバを設定します。だからあなたのpackage.jsonまたはWebPACKのセットアップは、このような何かを確認してください。