React Abrufanforderung für lokale JSON-Datei gibt index.html und nicht die JSON-Datei zurück

Question

Ich erfahre etwas unerwartetes Verhalten mit react und fetch. Es sollte sehr geradlinig sein.

Mein Code sieht wie folgt aus:

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

und meine Ordnerstruktur sieht wie folgt aus

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

Wenn ich das Netzwerk überprüfen, es fordert die index.html Seite, die für mich keinen Sinn macht. Hat das schon mal jemand erlebt?

Answer 1

Produktion: Wenn dieser Code in der Produktion laufen soll dann nicht hier fetch funktionieren wird, wenn Sie Setup einen Webserver haben, dass JSON-Datei zu dienen, aber Sie könnten die lokale JSON-Datei statt importieren:

import dict from './_dict.json'; 

dann innerhalb Ihrer componentDidMount Sie können einfach Karte darüber

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

Lokaler Host: Wenn Sie nur wa Um dies auf localhost auszuführen, sehe ich nicht, warum es nicht funktionieren würde, es sei denn, und ich vermute, dass Ihre React-Anwendung HTTP-Anfragen an einen lokalen Webserver übernimmt (wie es in Reactjs Entwicklung sehr häufig vorkommt). und dieser lokale Webserver ist nicht eingerichtet, um Ihre JSON-Datei zu bedienen. So überprüfen Sie Ihre package.json oder webpack Setup für so etwas wie dieses:

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

und konfigurieren Sie den Webserver auf dem Port läuft Ihre JSON dienen in Antwort auf eine Anfrage Datei auf.