Появился бесконечный цикл в компоненте React js

Question

Я догадываюсь, что это из-за useEffect, но решить не получается. Этот код отвечает за работу компонента корзины в интернет-магазине и он бесконечно отправляет запросы на сервер. Как можно решить?

import React, {useCallback, useEffect} from "react";
import Cart from "./Cart";
import {useDispatch, useSelector} from "react-redux";
import {deleteCartTC, getCartsTC} from "../../store/thunks/thunkCreators";
import {getToken} from "../../customProvider/tokenProvider";


const CartContainer = (props) => {

    const dispatch = useDispatch()
    const carts = useSelector((state) => state.cart.carts)
    const cartsProducts = useSelector((state) => state.cart.cartsProducts)
    const userToken = getToken()

    useEffect(() => {
        dispatch(getCartsTC(userToken.value))
    }, [carts]);

    // Удаление товара с корзины и ее обнавление
    const deleteCart = async (cart_id) => {
        try {
            await dispatch(deleteCartTC(userToken.value, cart_id))
            // После успешного удаления, повторно получаем корзины
            await dispatch(getCartsTC(userToken.value))
        } catch (error) {
            console.error('Ошибка при удалении корзины:', error)
        }
    }

    return <Cart carts={carts} cartsProducts={cartsProducts} deleteCart={deleteCart}/>

}


export default CartContainer

Answer 1

Проблема здесь связана с тем, что вы используете carts в зависимостях useEffect, и каждый раз, когда состояние carts изменяется, будет запускаться новый эффект. Однако, внутри эффекта, вы изменяете carts снова с помощью dispatch(getCartsTC(userToken.value)), что ведет к новому запуску эффекта, создавая бесконечный цикл. Попробуйте так:

const fetchCarts = useCallback(async () => {
        try {
            await dispatch(getCartsTC(userToken.value));
        } catch (error) {
            console.error('Ошибка при получении корзин:', error);
        }
    }, [dispatch, userToken.value]);

// Вызываем fetchCarts при монтировании компонента
useEffect(() => {
        fetchCarts();
    }, [fetchCarts]);

const deleteCart = async (cart_id) => {
        try {
            await dispatch(deleteCartTC(userToken.value, cart_id));
            // После успешного удаления, повторно получаем корзины
            fetchCarts();
        } catch (error) {
            console.error('Ошибка при удалении корзины:', error);
        }
    };

Должно помочь. Если нет, то нужно больше данных...

БЛОГ НА HUSL

Появился бесконечный цикл в компоненте React js

Ответы (1 шт):