Next.js - Задержка проблем с OnClick с использованием данных из использования ⇐ Javascript

[Anonymous]

Я делаю небольшую систему трекера полета, и я сталкиваюсь с проблемой. Вот код для страницы «Выберите свой полет»: < /p>

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

"use client"

interface MyPageProps {
searchParams: Promise;
}

export default function SelectFlight( {searchParams} : MyPageProps ) {
const params = React.use(searchParams);
const router = useRouter();
const [flightData, setFlightData] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [selectedFlightData, setSelectedFlightData] = useState();
const isUsingFlightNumber = params.isUsingFlightNumber || "false";
const flightFrom = params.flightFrom || "";
const flightTo = params.flightTo || "";
const flightNumber = params.flightNumber || "";
const flightDate = params.flightDate || "";

useEffect(() => {
const fetchFlightData = async () => {
try {
setLoading(true);
const params = await searchParams;
const url = new URL(`${BASE_API_URL}/api/flightsByFromTo`);
url.searchParams.append('flightNumber', flightNumber);
url.searchParams.append('flightFrom', flightFrom);
url.searchParams.append('flightTo', flightTo);
url.searchParams.append('flightDate', flightDate);

const response = await fetch(url);

if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}

const result = await response.json();
setFlightData(result);
} catch (err) {
setError(err instanceof Error ? err.message : 'An error occurred');
console.log("error", err);
} finally {
setLoading(false);
}
};

fetchFlightData();
}, []);

const handleClick = (event: React.MouseEvent) => {
if (flightData.length > 0 && !loading) {
const clickedId = parseInt(event.currentTarget.id);
setSelectedFlightData(flightData[clickedId]);
sessionStorage.setItem('individualFlightData', JSON.stringify(selectedFlightData));
//router.push(`/flight/passenger_info`);
}
}

if (error) {
return (



Error: {error}






);
}

return (



{loading ?



:

{flightData.map((data: ResultingFlightDetail, idx: number) => {
return (




{data.airlineCode || "XX"} {data.flightNum || "000"}

{formatTimeToLongString(data.departureDateTime)} - {formatTimeToLongString(data.arrivalDateTime)}




)
})}

}



);
}

Хотя это, по -видимому, извлекает и отображает данные, у меня есть проблема с функцией Onclick результирующего Div s.
Первая проблема заключается в том, что при первом щелчке Array FlightData пуст (и регистрирует это, подтверждает это), поэтому SelectionFledData является пустым. Я должен нажать снова, чтобы фактически увидеть заполненную FlightData и правильно установить SelectedFlightData .
Второй выпуск заключается в том, что нажимает на div сохраняет последний идентификатор. Так, например, я нажимаю на первый элемент, он возвращает неопределенный , я нажимаю на него еще раз, он захватывает индекс первого объекта. Если я передумаю и выберу, скажем, второй элемент, SelectedFlightData не изменяется - это все еще первый элемент. Я должен снова щелкнуть по второму элементу, чтобы выбрать его. Любая помощь будет очень оценена.

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