Бесконечный цикл useEffect при выборке из API

Я пытаюсь получить некоторые данные из API, но не имеет значения, какие зависимости я использую, useEffect все еще продолжает делать бесконечный цикл, что-то не так в коде или почему он продолжает это делать?

function HomePage() {
    const [Carousels, setCarousels] = useState([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        const getCarousels = async () => {
            setLoading(true);
            const genres = ["BestRated", "Newest"];
            for (const genre of genres) {
                try {
                    const res = await axios.get(`http://localhost:4000/api/carousels/` + genre);
                    console.info(res.data);
                    setCarousels([...Carousels, res.data]);
                } catch (err) {
                    console.info(err);
                }
            }
            setLoading(false);
        }
        getCarousels();
    }, [Carousels]);
    return (
        <div className='Home'>
            <NavBar />
            <HeroCard />
            {!loading && Carousels.map((carousel) => (
                <Carousel key = {carousel._id} carousel = {carousel} />
            ))}
            <Footer />
        </div>
    );
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
35
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

useEffect в вашем коде обновляются карусели при каждом запуске. Он видит обновленное значение и снова запускается. Вы можете исправить это разными способами, проще всего добавить [fetched, setFetched] = useState(false); и используйте его в своем useEffect для проверки перед получением из API

Ответ принят как подходящий

Эффект использования вызывается при изменении каруселей и изменении каруселей внутри useEffect.

Использовать заданное состояние с обратным вызовом

function HomePage() {
    const [Carousels, setCarousels] = useState([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        const getCarousels = async () => {
            setLoading(true);
            const genres = ["BestRated", "Newest"];
            for (const genre of genres) {
                try {
                    const res = await axios.get(`http://localhost:4000/api/carousels/` + genre);
                    console.info(res.data);
                    setCarousels(carouselsPrev => [...carouselsPrev, res.data]);
                } catch (err) {
                    console.info(err);
                }
            }
            setLoading(false);
        }
        getCarousels();
    }, []);
    return (
        <div className='Home'>
            <NavBar />
            <HeroCard />
            {!loading && Carousels.map((carousel) => (
                <Carousel key = {carousel._id} carousel = {carousel} />
            ))}
            <Footer />
        </div>
    );
}

Я изменил setCarousels, и это остановило бесконечный цикл, но я не знаю почему, карусели не обновляются должным образом, он не получает ответ от res.data

Trif Ionut 16.05.2022 19:04

@TrifIonut Можете ли вы записать вывод разрешения?

kennarddh 16.05.2022 19:29

Да, рес работает нормально, но в Каруселях он почему-то не добавляется

Trif Ionut 16.05.2022 19:32

@TrifIonut Можете ли вы показать мне вывод console.info(res)

kennarddh 16.05.2022 19:40

Это показано из журнала (res.data) Array(1) 0: {_id: '627d6e54f1a6fc3a220b9ffa', title: 'Лучшие рейтинговые фильмы', жанр: 'BestRated', содержание: Array(10), createdAt: '2022-05 -12T20:30:12.978Z', …} длина: 1 [[Прототип]]: Массив(0)

Trif Ionut 16.05.2022 19:45

А это из карусели: Array(0)length: 0[[Prototype]]: Array(0)

Trif Ionut 16.05.2022 19:46

Другие вопросы по теме