Почему при вызове fetch() внутри useEffect в Next JS возникает ошибка "Runtime error. Failed to fetch"?
Если вызываю вне useEffect, то данные нормально приходят, но возникает другая проблема - их получение начинает происходить многократно, а мне нужно получить их только при загрузке и в будущем менять при изменении состоянии в дочерних компонентах.
"use client";
import Container from "@/components/Container";
import ScheduleTable from "@/components/Schedule/ScheduleTable";
import ScheduleFilterNavbar from "@/components/Schedule/ScheduleFilterNavbar";
import {useEffect, useState} from "react";
import Lesson from "@/components/Schedule/Interfaces/Lesson";
export default async function Schedule() {
const [lessons, setLessons] = useState<Array<Lesson>>([]);
useEffect(() => {
/**
* Функция для получения данных расписания занятий с сервера
*/
const getLessons = async () => {
const res = await fetch('http://api.studytime.test/api/lesson/get_by_filter/');
if (!res.ok) {
throw new Error('Failed to fetch data');
}
const response = await res.json();
setLessons(response.data.lessons);
}
getLessons();
}, []);
return (
<section className="pt-16">
<Container>
<div className="pt-2 flex gap-20">
<ScheduleFilterNavbar/>
<ScheduleTable lessons={lessons}/>
</div>
</Container>
</section>
);
}
Протокол HTTP вместо HTTPS стоит намеренно, поскольку это другой домен, запущенный у меня локально