компонент, который от него зависит, не перерисовывается. При вызове dispatch (который вызывается при onClick) в хранилище изменения происходят (проверено). Переменная, от которой зависит внешний вид компонента, меняется (я это проверил, выводя ее в consoleLog при onclick, куда добавлен и dispatch, который меняет состояние). Переменная получена с помощью хука useSelector (то есть ее изменения должны перерисовывать компонент). Кто может сказать, в чем тут проблема? Код компонента:
import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux';
export default function BasketItem({item}) {
let basket = useSelector(state=>state.basket);
let g = basket.get(item);
const dispatch = useDispatch();
useEffect(()=>{
console.log("Корзина изменилась");
}, [g]);
return (
<div className="basket-item">
<img src={item.img} alt="Картинка ушла за хлебом" className="basket-item__img" />
<div className="basket-item__name">{item.name}</div>
<div className="basket-item__counter">
<img src="./images/mini/minus.svg"
alt="Картинка ушла за хлебом"
className="basket-item__minus"
onClick={()=>{dispatch({type: "removeProduct", payload: item}); console.log('Это g='+basket.get(item))}}
/>
<span className="basket-item__count">{basket.get(item)}</span>
<img className="basket-item__plus"
alt="Картинка ушла за хлебом"
src="./images/mini/plus.svg"
onClick={()=>dispatch({type: "addProduct", payload: item})}
/>
</div>
<div className="basket-item__price">{basket.get(item)*item.price + ' ₽'}</div>
</div>
)
}
Как в редьюсере выполняется addProduct?
const defaultStateProducts = { priceFloor: 3990, priceCeiling: 139990, characteristics: ['color', 'memory', 'producer'], currentCategory: phone, choise: { memory: [], producer: [], color: [], type: [], }, productPage: 1, } const defaultState = { ...defaultStateProducts, doc: document, basket: new Map(), } const reducer = function(state = defaultState, act){ switch(act.type){ case 'changePriceFloor': console.log('change f'); return {...state, priceFloor: act.payload, productPage: 1} case 'changePriceСeiling': console.log('change c'); return {...state, priceCeiling: act.payload, productPage: 1} case 'addVariant': let c = act.payload.char; let v = act.payload.variant; if(state.choise[c].includes(v)) return state; let res = {...state, choise: {...state.choise, [c]: state.choise[c].concat(v)}, productPage: 1} console.log(res.choise.color); return res; case 'removeVariant': let c1 = act.payload.char; let v1 = act.payload.variant; return {...state, choise: {...state.choise, [c1]: state.choise[c1].filter(item=>item!==v1)}, productPage: 1} case 'changeCurrentCategory': return {...state, currentCategory: act.payload, choise: { memory: [], producer: [], color: [], type: [], },} case 'changePage': if(state.productPage<2 && act.payload<0) return state; if(state.productPage>= Math.ceil(state .currentCategory .filter(item=>matchFilter(item, state.choise, { floor: state.priceFloor, ceiling: state.priceCeiling, })) .length/6) &&act.payload>0) return state; return {...state, productPage: state.productPage + act.payload} case 'to1stPage': return {...state, productPage: 1} case 'setDefaultState': return {...state, ...defaultStateProducts}; case 'addProduct': console.log(state.basket.get(act.payload)); return ( state.basket.has(act.payload)? {...state, basket: state.basket.set(act.payload, state.basket.get(act.payload)+1)}: {...state, basket: state.basket.set(act.payload, 1)} ) case 'removeProduct': console.log(state.basket.get(act.payload)); if(state.basket.get(act.payload)===1) state.basket.delete(act.payload); return ( state.basket.get(act.payload)>1? {...state, basket: state.basket.set(act.payload, state.basket.get(act.payload)-1)}: {...state, basket: state.basket} ) default: console.log('default'); return state; } } Вот код редюсера
Пощади, можешь скрин прислать места где addProduct выполняется?
Первое что в глаза бросается, чего не сделаешь basket массивом?
каждому объекту надо сопоставить число, лучше всего для этого подходит map
А зачем число сопоставлять?
Обсуждают сегодня