Shadcn Komponente auswählen | Wie muss ein Wert mithilfe einer Funktion ausgewählt werden? ⇐ JavaScript

[Guest]

Ich habe ein Problem bei der Verwendung der Shadcn Select-Komponente in NextJs.
Ich habe eine Auswahlkomponente zum Auswählen des Speicherorts

Code: Select all

          




{locations.map((location: any, index: number) => (

{location.title}

))}

Das Problem besteht darin, dass ich die URL-Abfrageparameter aktualisiere, wenn ein Standort ausgewählt wird. Wenn ich auf eine Schaltfläche klicke, die mich zu derselben Seite weiterleitet, auf der ich mich bereits befinde, werden die Abfrageparameter vorübergehend entfernt.
Ich habe versucht, eine Setter-Funktion in einem useEffect zu verwenden, wo ich abrufe die Daten und behandelt sie wie einen Standardwert. Dies funktioniert einwandfrei, wenn die Komponente erneut gemountet wird. Wenn ich jedoch auf dieselbe Schaltfläche klicke, um zur aktuellen Seite zu navigieren, wird die Abfrage gelöscht und ersetzt und die Select-Komponente behält ihren internen Status.
Zum Beispiel:Wenn die Select-Komponente derzeit die zweite Option als ausgewählt anzeigt und ich zur gleichen Seite navigiere, werden die Abfrage und die abgerufenen Daten auf die erste Option zurückgesetzt. Die Select-Komponente zeigt jedoch weiterhin die zweite Option an.
Dadurch entsteht eine Diskrepanz zwischen der angezeigten Auswahl in der Select-Komponente und den tatsächlichen Daten oder Abfrageparametern.

Code: Select all

 useEffect(() => {
const getLocations = async () => {
try {
const response = (await get({
url: 'api/menu/getLocations',
})) as Location[];
setLocations(response);
if (!selectedLocation && response.length > 0) {
createLocationQuery(response[0].title);
}
} catch (error) {
console.log(error);
}
};
getLocations();
}, [router, selectedLocation]);

Code: Select all

  const createLocationQuery = (value: string) => {
const createQuery = createQueryString('location', value, searchParams);
router.push(pathname + '?' + createQuery);
};

Gibt es eine Möglichkeit, die ausgewählte Komponente mithilfe einer Funktion im userEffect oder vielleicht etwas anderem zurückzusetzen, sodass der ausgewählte Status als erste Option angezeigt wird?