Laden von Seitendaten aus dem Speicher über URL-Parameter in React Router
Jetzt können wir Produkte zu unserer Anwendung hinzufügen. Starten Sie die Anwendung, fügen Sie mit der Schaltfläche ein paar Produkte hinzu. Wenn wir jetzt auf die Produkte selbst in der Liste klicken, dann werden wir sehen, dass jedes Produkt vorerst noch die gleiche statische Seite hat, mit der wir uns in dieser und den folgenden Lektionen beschäftigen werden.
Ein weiterer Punkt ist ebenfalls zu beachten.
Grundsätzlich ist die gesamte URL in Segmente unterteilt - das sind
Teile der URL zwischen den Zeichen /. Sie
erinnern sich wahrscheinlich, dass wir beim Erstellen dieser
Anwendung den Pfad
'products/:productId' angegeben haben.
Nun, :productId wird hier
als dynamisches Segment bezeichnet. Ihm
wird das Symbol ':' vorangestellt. Die Werte in
diesem Segment werden sich ändern,
genau diese gelangen in die URL-Parameter
(URL Params oder params), die an den
Loader unter einem bestimmten Schlüssel übergeben werden, in unserem
Fall ist das params.productId.
Werfen Sie einen Blick auf die Adressleiste im Browser,
wenn Sie auf Produkte in der Liste klicken. Sie werden sehen,
dass sich das letzte Segment in der Adressleiste ändert,
genau diese Werte werden zum Loader gelangen.
Und unsere Produkte im Speicher haben eine eindeutige,
von uns generierte id, somit
wird uns genau das Produkt geladen, das
wir benötigen.
Und jetzt, nach einer kleinen Abschweifung, lasst uns endlich mit der Produktseite arbeiten, genauer gesagt - mit dem Laden von Daten aus dem Speicher.
Wiederholen wir den bekannten Prozess. Zuerst fügen wir in
forStorage.js die Funktion
getProduct hinzu, um Daten
eines bestimmten Produkts anhand der
id aus dem Speicher abzurufen. Hier werden wir
die id an die Funktion übergeben
und dementsprechend,
wenn unser Produkt "gecached" ist, dann
wird es ohne Verzögerung ausgegeben:
export async function getProduct(id) {
await someNetwork(`product:${id}`);
}
Als nächstes müssen wir das Array der Produkte abrufen
und darunter unser Produkt anhand der übergebenen
id finden:
export async function getProduct(id) {
await someNetwork(`product:${id}`);
let products = await localforage.getItem('products');
let product = products.find((product) => product.id === id);
return product ?? null;
}
Nehmen Sie die Anwendung, die Sie in den
Aufgaben zu den vorherigen Lektionen erstellt haben. Nutzen Sie die
Materialien der Lektion und erstellen Sie in
forStorage.js die Funktion
getStudent zum Abrufen
von Studentendaten anhand der id.
