Возникла проблема при попытке обновить счетчик на сервере через axios redux

Рейтинг: -1Ответов: 1Опубликовано: 25.03.2023

Есть функция с условием, при котором товар добавляется в корзину. Если продукт уже был добавлен, то увеличьте его count++. В консоли браузера возникает ошибка, необнаруженная ошибка типа: невозможно присвоить свойство 'count' объекту '#'только для чтения'.

Здесь пытаюсь увеличить

const Products: React.FC<IProduct> = ({id, img, title, price}) => {
    
    const favorite = useAppSelector(state => state.favoriteReducer.list.find(item => item.id === id));
    const cart = useAppSelector(state => state.cartReducer.list.find(item => item.id === id));

    const value = {id, img, title, price};

    const dispatch = useAppDispatch();

    // const handleAddFavorite = () => {
    //     dispatch(addFavorite({id, img, title, price}))
    // }

    const handleFavorite = () => {
        dispatch(addFavoriteRefetch({id, img, title, price}));
        
        if(favorite){
            dispatch(deleteFavoriteFetch(id))
        } else {
            dispatch(addFavoriteFetch(({id, img, title, price})))
        }     
    }

    const handleCart = () => {
        dispatch(addProduct({id, img, title, price}))

        if(cart) {
            dispatch(addCartFetch(cart.count++)); //Конкретно тут
        } else {
            dispatch(addCartFetch({...value, count: 1}));
        }
        
    }
    
    return (
        <div className={styles.contentProducts}>
            <img onClick={handleFavorite} className={styles.contentProductsFavorite} src={favorite ? '/images/heartclick.png' : "/images/heart.png"} alt="" />
            <img className={styles.contentProductsImg} src={img} alt="" />
            <div className={styles.contentProductsOptions}>
                <div>
                    <p>{title}</p>
                    <div>Цена: {price} р.</div>
                </div>
                <button onClick={handleCart}>Добавить</button>  
            </div>
            
        </div>
    )
}

Здесь запросы серверные

export const cartFetch = createAsyncThunk<IPurchase[]>(
    'cart/CartFetch',
    async () => {
        const { data } = await axios.get<IPurchase[]>('http://localhost:3001/cart');
        return data;
    }
);

export const addCartFetch = createAsyncThunk(
    'addCart/addCartFetch',
    async (params: IPurchase | number) => {
        await axios.post(`http://localhost:3001/cart`, params)
    }
);

export const deleteCartFetch = createAsyncThunk(
    'deleteCart/deleteCartFetch',
    async (id: string) => {
        await axios.delete(`http://localhost:3001/cart/${id}`)
    }
)

javascript reactjs axios redux
Источник: Stack Overflow на русском

Ответы

▲ 0

предположительно мутировать state который дастается из useAppSelector нельзя (сам шя изучаю @toolkit)

решает проблему это: dispatch(addCartFetch(cart.count + 1));