Le composant de la barre de navigation ne s'affiche pas à nouveau en cas de changement d'état

Question

J'essaie de créer un panier. J'ai créé un contexte et passé l'état comme valeur en appuyant sur les boutons d'incrémentation et de décrémentation du panier, mon nombre d'articles change mais lorsque j'utilise le même contexte dans le composant de la barre de navigation, dans le panier, le nombre total d'articles ne changera pas . Je joins l'extrait de code ci-dessous

C'est là que je crée le contexte

const initialState:initialType = {
  cartItems:cartItems,
  totalItems:cartItems.reduce((accumulator, object) => {
    return accumulator + object.quantity
  }, 0),
  totalAmount:0
}

export const CartContext = createContext<initialType|null>(initialState);

Vous trouverez ci-dessous mon fournisseur useContext.

<CartContext.Provider value={{...state}}>

<ContextCart removeItems={removeItems} increment={increment} decrement={decrement}/> </CartContext.Provider>

La valeur du statut provient de useReducer et il se met à jour, tout va bien

C'est ainsi que j'utilise useContext Hook dans la barre de navigation pour obtenir le nombre total d'articles dans le panier

const cartItems = useContext(CartContext);

return (
  <div>{cartItems.totalItems}</div>`
)

Mais chaque fois que le statut change, la barre de navigation ne restitue pas le nombre total mis à jour d'articles dans le panier, aidez-moi s'il vous plaît.

Voici ma fonction useReducer et tout ce qu'elle met à jour. J'ai vérifié sa fonctionnalité en exécutant console.log(). Tout ce qu'il renvoie est correct, y compris state.totalItems.

type actionType={
      type:string,
      payload:string
    }
    export const reducer = (state:initialType ,action:actionType) => {
      if(action.type === "Delete" ){
        return {
          ...state,
          cartItems:state.cartItems.filter((currentElement)=>{
            return currentElement.id != action.payload
          })
        }
      }
       if (action.type === 'increment'){
          state.cartItems.forEach((element)=>{
            if (element.id === action.payload){
              element.quantity++;
              state.totalItems++
            }
          })
         
          return {...state};
          
      }
      if (action.type === 'decrement'){
        state.cartItems.forEach((element)=>{
          if (element.id === action.payload){
            element.quantity--;
            state.totalItems--;
          }
        })
        console.log(state)
        return {...state};
      }
      return {...state};
    }```

Answer 1

Lorsque vous utilisez useReducer 时，它会返回当前状态，对吧？就你而言，该状态是一个对象。因此，您可以直接从该状态对象获取 totalItems . Par exemple :

const [state, dispatch] = useReducer(cartReducer, initialState);

// Here's where we get totalItems from the state
const { totalItems } = state;

Donc, de cette façon, totalItems est extrait directement de l'objet d'état et vous pouvez l'utiliser partout où vous en avez besoin.