компонент, который от него зависит, не  перерисовывается. При вызове 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
А зачем число сопоставлять?
Обсуждают сегодня