Lesen Sie JSON-Daten aus externen Dateien in React

1. Lesen Sie JSON-Daten aus externen Dateien in React
2. Verwenden Sie die import-Anweisung, um JSON-Daten aus externen Dateien in React zu lesen
3. Verwenden Sie die require()-Funktion, um JSON-Daten aus externen Dateien in React zu lesen

JSON ist das praktischste Format, um Daten im Web auszutauschen. In React erstellte Webanwendungen rufen normalerweise externe Daten im JSON-Format ab.

Ohne externe Daten wären Anwendungen nicht sehr nützlich oder dynamisch. Normalerweise ist die Datenquelle eine API, es kann sich aber auch um eine externe Datei handeln.

In diesem Artikel wird untersucht, wie Daten aus JSON-Dateien in React gelesen werden.

Lesen Sie JSON-Daten aus externen Dateien in React

Es ist ziemlich einfach, auf die Daten aus einer JSON-Datei in React zuzugreifen. In JSX können Sie die Methode .map() verwenden, um über das Array zu gehen und eine Information von jedem Objekt im Array anzuzeigen.

Dafür benötigen Sie geschweifte Klammern {}, mit denen Sie JavaScript-Ausdrücke verwenden können, um Elemente wie <h1> zu erzeugen.

Lassen Sie uns zwei Möglichkeiten untersuchen, dies in React zu tun.

Verwenden Sie die import-Anweisung, um JSON-Daten aus externen Dateien in React zu lesen

Sie können eine einfache import-Anweisung verwenden, um externe JSON-Daten in Ihrer React-Komponente verfügbar zu machen.

Die Anweisung import erstellt eine Live-Bindung. Mit anderen Worten, wenn Sie einen Teil der Daten in der Originaldatei ändern, werden die Werte in Ihrer Anwendung ebenfalls aktualisiert.

Beispiel:

import { stockData } from "./data";

export default function App() {
    return (
    <div className="App">
            {stockData.map((data, key) => {
                return <h1 key={key}>{data.company}</h1>;
            })}
        </div>
    );
}

Wir haben die Variable stockData aus der Datei data.json importiert, die ein Objekt im JSON-Format enthält.

Dann haben wir die geschweiften Klammern verwendet, um die Methode .map() im Array stockData aufzurufen, und die Werte von jedem Element im Array als <h1>-Element angezeigt.

Sehen Sie sich diese Live-Demo auf CodeSandbox an. Versuchen Sie, etwas in den Quelldaten zu ändern, und prüfen Sie, ob sich etwas in Ihrer React-App ändert.

Verwenden Sie die require()-Funktion, um JSON-Daten aus externen Dateien in React zu lesen

Es gibt eine andere Möglichkeit, externe JSON-Daten in Ihren React-Komponenten mit der Funktion require() zu lesen.

Beispiel:

var data = require("./moredata.json");

export default function App() {
    return (
        <div className="App">
            {stockData.map((data, key) => {
                return <h1 key={key}>{data.company}</h1>;
            })}
            <h2>The name is: {data[0].name}</h2>
        </div>
    );
}

In diesem Fall lesen wir die Daten aus der Datei moredata.json und speichern sie in der Variable data.

Dann haben wir ein <h2>-Element erstellt. Zwischen den öffnenden und schließenden Tags haben wir einen Verweis auf die von uns geladenen Daten platziert.

Wir lesen die Eigenschaft name des ersten Objekts des Arrays. Wie Sie auf Live-Demo sehen können, funktioniert es.

Mögliche Fehler

Die neueren Versionen von Webpack unterstützen diese Funktion. Wenn Sie Fehler erhalten, sollten Sie erwägen, einen externen Loader wie json-loader zu installieren.

Probieren Sie es aus auf npm.