Heim Web-Frontend Front-End-Fragen und Antworten Was soll ich tun, wenn der Wert verschwindet, nachdem die Reaktionsseite aktualisiert wurde?

Was soll ich tun, wenn der Wert verschwindet, nachdem die Reaktionsseite aktualisiert wurde?

Dec 29, 2022 am 11:11 AM
react 刷新

Die Lösung für das Verschwinden des Werts nach der Aktualisierung der Reaktionsseite: 1. Aktualisieren Sie die Seite und prüfen Sie, ob die Daten im Status gelöscht werden. 2. Übergeben Sie „const name = location.query.name; const id = location. query.id; "-Methode fügt Parameter im Sprunglink hinzu, damit die Daten nach dem Aktualisieren der Seite beim Übertragen von Parametern nicht verloren gehen.

Was soll ich tun, wenn der Wert verschwindet, nachdem die Reaktionsseite aktualisiert wurde?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Was soll ich tun, wenn der übergebene Wert verschwindet, nachdem die Reaktionsseite aktualisiert wurde?

Lösen Sie das Problem des Parameterverlusts nach dem Reagieren auf Routing-Sprungparameter und aktualisieren Sie die Seite

import { useHistory } from 'react-router-dom';
const history = useHistory();
 
history.push({
      pathname: '/details',
      state: {
        name: name,
        id: id,
      },
});
Nach dem Login kopieren

Die Verwendung des Status im Verlauf kann tatsächlich Parameter übergeben und beim Aufrufen der Seite normal angezeigt werden, die Daten im Status jedoch Wenn das Problem nach dem Aktualisieren der Seite gelöscht wird, kann die Seite nicht normal angezeigt werden.

import { useHistory } from 'react-router-dom';
const history = useHistory();
 
history.push({
      pathname: '/details',
      query: {
        name: name,
        id: id,
      },
});
Nach dem Login kopieren

Mit der Abfrage können Sie beim Aktualisieren der Seite Parameter hinzufügen, ohne dass die Daten verloren gehen. Wenn jedoch zu viele Parameter übergeben werden, ist der Link sehr lang.

import { useLocation } from 'react-router-dom';
const location = useLocation();
const name = location.query.name;
const id = location.query.id;
// 获取state参数的写法
const name = location.state.name;
const id = location.state.id;
Nach dem Login kopieren

So erhalten Sie Parameter auf der Sprungseite

(Persönlicher Test ist effektiv, es treten jedoch Tippfehler auf)

Empfohlenes Lernen: „Video-Tutorial reagieren

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn der Wert verschwindet, nachdem die Reaktionsseite aktualisiert wurde?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

6 Möglichkeiten, Webseiten auf dem iPhone zu aktualisieren 6 Möglichkeiten, Webseiten auf dem iPhone zu aktualisieren Feb 05, 2024 pm 02:00 PM

Wenn Sie auf Ihrem iPhone im Internet surfen, werden die geladenen Inhalte vorübergehend gespeichert, solange die Browser-App geöffnet bleibt. Da die Website jedoch regelmäßig Inhalte aktualisiert, ist die Aktualisierung der Seite eine effektive Möglichkeit, alte Daten zu löschen und die neuesten veröffentlichten Inhalte anzuzeigen. So verfügen Sie immer über die neuesten Informationen und Erfahrungen. Wenn Sie die Seite auf dem iPhone aktualisieren möchten, erklärt Ihnen der folgende Beitrag alle Methoden. So aktualisieren Sie Webseiten in Safari [4 Methoden] Es gibt mehrere Methoden, um die Seiten zu aktualisieren, die Sie in der Safari-App auf dem iPhone anzeigen. Methode 1: Verwenden Sie die Schaltfläche „Aktualisieren“. Der einfachste Weg, eine in Safari geöffnete Seite zu aktualisieren, besteht darin, die Option „Aktualisieren“ in der Registerkartenleiste Ihres Browsers zu verwenden. Wenn Safa

Die F5-Aktualisierungstaste funktioniert unter Windows 11 nicht Die F5-Aktualisierungstaste funktioniert unter Windows 11 nicht Mar 14, 2024 pm 01:01 PM

Funktioniert die F5-Taste auf Ihrem Windows 11/10-PC nicht richtig? Die F5-Taste wird normalerweise verwendet, um den Desktop oder Explorer zu aktualisieren oder eine Webseite neu zu laden. Einige unserer Leser haben jedoch berichtet, dass die F5-Taste ihre Computer aktualisiert und nicht richtig funktioniert. Wie aktiviere ich die F5-Aktualisierung in Windows 11? Um Ihren Windows-PC zu aktualisieren, drücken Sie einfach die Taste F5. Auf einigen Laptops oder Desktops müssen Sie möglicherweise die Tastenkombination Fn+F5 drücken, um den Aktualisierungsvorgang abzuschließen. Warum funktioniert die F5-Aktualisierung nicht? Wenn das Drücken der F5-Taste Ihren Computer nicht aktualisiert oder Probleme unter Windows 11/10 auftreten, kann dies daran liegen, dass die Funktionstasten gesperrt sind. Weitere mögliche Ursachen sind die Tastatur oder die F5-Taste

So erstellen Sie eine Echtzeit-Chat-App mit React und WebSocket So erstellen Sie eine Echtzeit-Chat-App mit React und WebSocket Sep 26, 2023 pm 07:46 PM

So erstellen Sie eine Echtzeit-Chat-Anwendung mit React und WebSocket Einführung: Mit der rasanten Entwicklung des Internets hat die Echtzeitkommunikation immer mehr Aufmerksamkeit auf sich gezogen. Live-Chat-Apps sind aus dem modernen Sozial- und Arbeitsleben nicht mehr wegzudenken. In diesem Artikel wird erläutert, wie Sie mit React und WebSocket eine einfache Echtzeit-Chat-Anwendung erstellen, und es werden spezifische Codebeispiele bereitgestellt. 1. Technische Vorbereitung Bevor wir mit der Erstellung einer Echtzeit-Chat-Anwendung beginnen, müssen wir die folgenden Technologien und Tools vorbereiten: React: eine zum Erstellen

Leitfaden zur React-Front-End- und Back-End-Trennung: So erreichen Sie die Entkopplung und unabhängige Bereitstellung von Front-End und Back-End Leitfaden zur React-Front-End- und Back-End-Trennung: So erreichen Sie die Entkopplung und unabhängige Bereitstellung von Front-End und Back-End Sep 28, 2023 am 10:48 AM

React-Leitfaden zur Front-End- und Back-End-Trennung: So erreichen Sie die Front-End- und Back-End-Entkopplung und die unabhängige Bereitstellung. Es sind spezifische Codebeispiele erforderlich. In der heutigen Webentwicklungsumgebung ist die Front-End- und Back-End-Trennung zu einem Trend geworden. Durch die Trennung von Front-End- und Back-End-Code kann die Entwicklungsarbeit flexibler und effizienter gestaltet und die Zusammenarbeit im Team erleichtert werden. In diesem Artikel wird erläutert, wie Sie mithilfe von React eine Front-End- und Back-End-Trennung erreichen und so die Ziele der Entkopplung und unabhängigen Bereitstellung erreichen. Zuerst müssen wir verstehen, was Front-End- und Back-End-Trennung ist. Im traditionellen Webentwicklungsmodell sind Front-End und Back-End gekoppelt

So erstellen Sie einfache und benutzerfreundliche Webanwendungen mit React und Flask So erstellen Sie einfache und benutzerfreundliche Webanwendungen mit React und Flask Sep 27, 2023 am 11:09 AM

So erstellen Sie mit React und Flask einfache und benutzerfreundliche Webanwendungen. Einführung: Mit der Entwicklung des Internets werden die Anforderungen an Webanwendungen immer vielfältiger und komplexer. Um den Anforderungen der Benutzer an Benutzerfreundlichkeit und Leistung gerecht zu werden, wird es immer wichtiger, moderne Technologie-Stacks zum Aufbau von Netzwerkanwendungen zu verwenden. React und Flask sind zwei sehr beliebte Frameworks für die Front-End- und Back-End-Entwicklung, und sie arbeiten gut zusammen, um einfache und benutzerfreundliche Webanwendungen zu erstellen. In diesem Artikel erfahren Sie, wie Sie React und Flask nutzen

So erstellen Sie eine zuverlässige Messaging-App mit React und RabbitMQ So erstellen Sie eine zuverlässige Messaging-App mit React und RabbitMQ Sep 28, 2023 pm 08:24 PM

So erstellen Sie eine zuverlässige Messaging-Anwendung mit React und RabbitMQ Einführung: Moderne Anwendungen müssen zuverlässiges Messaging unterstützen, um Funktionen wie Echtzeitaktualisierungen und Datensynchronisierung zu erreichen. React ist eine beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, während RabbitMQ eine zuverlässige Messaging-Middleware ist. In diesem Artikel wird erläutert, wie Sie React und RabbitMQ kombinieren, um eine zuverlässige Messaging-Anwendung zu erstellen, und es werden spezifische Codebeispiele bereitgestellt. RabbitMQ-Übersicht:

Anleitung zum Debuggen von React-Code: So finden und beheben Sie Front-End-Fehler schnell Anleitung zum Debuggen von React-Code: So finden und beheben Sie Front-End-Fehler schnell Sep 26, 2023 pm 02:25 PM

React-Code-Debugging-Leitfaden: So finden und beheben Sie Front-End-Fehler schnell. Einführung: Bei der Entwicklung von React-Anwendungen stoßen Sie häufig auf eine Vielzahl von Fehlern, die zum Absturz der Anwendung oder zu fehlerhaftem Verhalten führen können. Daher ist die Beherrschung von Debugging-Fähigkeiten eine wesentliche Fähigkeit für jeden React-Entwickler. In diesem Artikel werden einige praktische Techniken zum Auffinden und Beheben von Front-End-Fehlern vorgestellt und spezifische Codebeispiele bereitgestellt, um Lesern dabei zu helfen, Fehler in React-Anwendungen schnell zu finden und zu beheben. 1. Auswahl der Debugging-Tools: In Re

React Router-Benutzerhandbuch: So implementieren Sie die Front-End-Routing-Steuerung React Router-Benutzerhandbuch: So implementieren Sie die Front-End-Routing-Steuerung Sep 29, 2023 pm 05:45 PM

ReactRouter-Benutzerhandbuch: So implementieren Sie die Front-End-Routing-Steuerung Mit der Popularität von Single-Page-Anwendungen ist das Front-End-Routing zu einem wichtigen Bestandteil geworden, der nicht ignoriert werden kann. Als beliebteste Routing-Bibliothek im React-Ökosystem bietet ReactRouter umfangreiche Funktionen und benutzerfreundliche APIs, wodurch die Implementierung des Front-End-Routings sehr einfach und flexibel ist. In diesem Artikel wird die Verwendung von ReactRouter vorgestellt und einige spezifische Codebeispiele bereitgestellt. Um ReactRouter zuerst zu installieren, benötigen wir

See all articles