@demos_x3m

Почему при вызове fetch() внутри useEffect в Next JS возникает ошибка "Runtime error. Failed to fetch"?

Почему при вызове 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 стоит намеренно, поскольку это другой домен, запущенный у меня локально
  • Вопрос задан
  • 177 просмотров
Решения вопроса 1
@demos_x3m Автор вопроса
Проблема была в CORS.
Сначала отвергал это решение в связи с тем, что без useEffect всё работало, но добавление заголовков CORS в ответ сервера исправило ситуацию.
Если кто сможет объяснить, почему именно при вызове fetch() через useEffect возникла проблема с CORS, был бы рад.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы