Перенаправление на новую страницу с параметрами и извлечением из API приводит к API Fetch Loop ⇐ Javascript

[Anonymous]

Я сделал компонент поисковой панели, SearchPanel.tsx . На ней кнопка снимает данные из формы (полет от полета, дата полета и некоторые другие данные), а затем отправляет это на новую страницу.

Код: Выделить всё

'use client';
import "./searchPanel.css";
import React, { useState } from "react";
import { useRouter } from "next/navigation";

export default function SearchPanel() {
const router = useRouter();
const [isUsingFlightNum, setIsUsingFlightNum] = useState(false);
const [locFromValue, setLocFromValue] = useState('');
const [locToValue, setLocToValue] = useState('');
const [flightNumValue, setFlightNumValue] = useState('');
const [flightDateValue, setFlightDateValue] = useState('');

const locFromChange = (e: React.ChangeEvent) => {
setLocFromValue(e.target.value);
};

const locToChange = (e: React.ChangeEvent) => {
setLocToValue(e.target.value);
};

const flightNumChange = (e: React.ChangeEvent) => {
setFlightNumValue(e.target.value);
};

const flightDateChange = (e: React.ChangeEvent) => {
setFlightDateValue(e.target.value);
};

const handleSubmit = async (formData: FormData) => {
const flightFrom = formData.get('flightFrom')?.toString() || "";
const flightTo = formData.get('flightTo')?.toString() || "";
const flightNumber = formData.get('flightNumber')?.toString() || "";
const flightDate = formData.get('flightDate')?.toString() || "";

if (flightDate !== "" && (flightFrom !== "" && flightTo !== "" || flightNumber !== "")) {
const params = new URLSearchParams();

params.set('is_using_flight_number', isUsingFlightNum.toString());
params.set('flight_from', flightFrom);
params.set('flight_to', flightTo);
params.set('flight_num', flightNumber);
params.set('flight_date', flightDate);

router.push(`/flight/choose?${params.toString()}`)
} else {
alert("One or more required fields are missing.");
}
}

return (

Front end code here

);
}

, который перемещается на другую страницу, Flight/select/page.tsx . Эта страница теперь берет параметры от панели поиска и использует в качестве параметров для вызова API: < /p>

Код: Выделить всё

export default async function SelectFlight( {searchParams} : MyPageProps ) {
// const [selectedFlightCardId, setSelectedFlightCardId] = useState(-1);
// ^^ Code that I need
const params = await searchParams;
const isUsingFlightNum = params!.is_using_flight_number || "";
const flightFrom = params!.flight_from || "";
const flightTo = params!.flight_to || "";
const flightNumber = params!.flight_num || "";
const flightDate = params!.flight_date || "";

const url = new URL(`${BASE_API_URL}/api/flights`);
const options = {
method: "GET",
};

url.searchParams.append('is_using_flight_number', isUsingFlightNum.toString());
url.searchParams.append('flight_from', flightFrom);
url.searchParams.append('flight_to', flightTo);
url.searchParams.append('flight_num', flightNumber);
url.searchParams.append('flight_date', flightDate);
const response = await fetch(url, options);
const result = await response.json();
const flightData = result.data;

const handleClick = (event) => {
const clickedId = event.target.id;
console.log(`clickedId`, clickedId);
}

return (

Front end code here

);
}

Это работает, пока я не добавлю «Использовать клиент» в самом верху, который мне нужно для обновления «Clicked стиля и сохранить идентификатор»
, затем страница просто называет код выборочного кода, пока я не убью проект или навигация в другом месте. Удаление моего кода и простое добавление чего -то вроде console.log ("help") также увидит помощь неоднократно напечатана и в консоли.

Подробнее здесь: https://stackoverflow.com/questions/797 ... -api-fetch