Daten aus einer JSON-Datei in einer React-App abrufen

Beim Abrufen von Daten aus einer Datei müssen die in der Datei gespeicherten Informationen abgerufen und in Ihrer Anwendung zugänglich gemacht werden. Während der spezifische Prozess vom Dateityp und der Programmiersprache abhängt, bleiben die allgemeinen Prinzipien ähnlich:

Beim Abrufen von Daten aus einer JSON-Datei müssen die in der Datei gespeicherten Daten abgerufen und in Ihrer Anwendung nutzbar gemacht werden. In diesem Tutorial erfahren Sie, wie Sie Daten korrekt aus einer JSON-Datei in Ihrer React-App abrufen und im Frontend nutzen.

Einrichten einer lokalen JSON-Datei

Erstellen Sie in einem leeren Create React App-Projekt eine lokale JSON-Datei mit dem Namen data.json im Verzeichnis public. Ihre Fetch-API-Aufrufe aus einer React-Komponente suchen immer nach Dateien oder anderen relevanten Assets in diesem public-Verzeichnis. Create-React-App legt Ihre Assets während der Kompilierung nicht automatisch in diesem Verzeichnis ab, sodass Sie dies manuell tun müssen.

Fügen Sie als Nächstes einige Dummy-JSON-Daten in diese Datei ein. Zu Demonstrationszwecken werden die im folgenden Beispiel verwendeten JSON-Daten vom JSON Generator generiert. Wenn Sie Ihr eigenes JSON verwenden, stellen Sie sicher, dass es korrekt formatiert ist.

Verbrauchen lokaler JSON-Daten mithilfe der Fetch-API

Der nächste Schritt, den Sie ausführen müssen, ist das korrekte Abrufen dieser Daten. Erstellen Sie eine Methode getData(), die lokales JSON mithilfe der Abruf-API von JavaScript abruft, und rufen Sie sie in useEffect auf, wie unten gezeigt.

const getData=()=>{
    fetch('data.json'
    ,{
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    }
    )
      .then(function(response){
        console.log(response)
        return response.json();
      })
      .then(function(myJson) {
        console.log(myJson);
      });
  }
  useEffect(()=>{
    getData()
  },[])

Der Pfad zu Ihrer JSON-Datei sollte entweder 'data.json' oder './data.json' sein. Andere relative Pfade führen möglicherweise zu einem 404-Fehler, wenn Sie versuchen, auf diese Ressource zuzugreifen. Sie müssen auch einige headers übergeben, die Content-Type und Accept als application/json angeben, um es Ihnen mitzuteilen Client, auf den Sie zugreifen und eine JSON-Ressource von einem Server akzeptieren möchten.

Laden von Daten in die Komponente

Erstellen Sie mit dem useState-Hook einen Status, um diese Daten zu speichern und im DOM darzustellen.

const [data,setData]=useState([]);

Weisen Sie dieser Statusvariablen die JSON-Daten in Ihrem Abrufaufruf zu.

const getData=()=>{
    fetch('data.json'
    ,{
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    }
    )
      .then(function(response){
        console.log(response)
        return response.json();
      })
      .then(function(myJson) {
        console.log(myJson);
        setData(myJson)
      });
  }

Fügen Sie je nach JSON-Struktur relevante Prüfungen in die return-Anweisung Ihrer Komponente ein, bevor Sie diese Daten rendern oder laden. Der GET-Aufruf für Ihre JSON-Ressource erfolgt, wenn die Komponente im DOM bereitgestellt wird. Da es sich jedoch um eine asynchrone Aufgabe handelt, wird Ihre Return-Anweisung ausgeführt, bevor der API-Aufruf erfolgt. Da Sie den Status aktualisieren, nachdem Sie die erforderlichen Daten abgerufen haben, aktualisiert ein erneutes Rendern der Komponente das DOM mit im Status gespeicherten JSON-Daten. Bei dem hier verwendeten JSON handelt es sich um ein Array von Objekten. Daher besteht die relevante Prüfung darin, zu prüfen, ob der Status vorhanden ist, und folglich zu überprüfen, ob er eine Länge ungleich Null hat, wie unten gezeigt.

 return (
    <div className="App">
     {
       data && data.length>0 && data.map((item)=><p>{item.about}</p>)
     }
    </div>
 );

Wenn Ihr JSON ein Objekt zurückgibt, überprüfen Sie einfach, ob Ihr Status zum Zeitpunkt der Ausgabe nicht null ist, andernfalls erhalten Sie möglicherweise eine Fehlermeldung.

Schauen Sie sich den gesamten Code unten an.

import React,{useState,useEffect} from 'react';
import './App.css';

function App() {
  const [data,setData]=useState([]);
  const getData=()=>{
    fetch('data.json'
    ,{
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    }
    )
      .then(function(response){
        console.log(response)
        return response.json();
      })
      .then(function(myJson) {
        console.log(myJson);
        setData(myJson)
      });
  }
  useEffect(()=>{
    getData()
  },[])
  return (
    <div className="App">
     {
       data && data.length>0 && data.map((item)=><p>{item.about}</p>)
     }
    </div>
  );
}

export default App;

Sie können auch eine leistungsstarke Bibliothek eines Drittanbieters namens Axios verwenden, um GET-Aufrufe an eine lokale JSON-Datei anstelle der Fetch-API durchzuführen. Indem Sie Daten direkt aus einer lokalen JSON-Datei laden, können Sie Ihren Server vor unzähligen unnötigen Aufrufen in der lokalen Entwicklung bewahren.