Die Navigationsleistenkomponente wird bei einer Statusänderung nicht neu gerendert

Question

Ich versuche, einen Warenkorb zu erstellen. Ich habe einen Kontext erstellt und den Status als Wert übergeben, wenn ich auf die Schaltflächen zum Erhöhen und Verringern im Warenkorb klicke. Die Anzahl meiner Artikel ändert sich. Wenn ich jedoch denselben Kontext in der Navigationsleistenkomponente im Warenkorb verwende, ändert sich die Gesamtzahl der Artikel nicht . Ich füge den Codeausschnitt unten bei

Hier schaffe ich den Kontext

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

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

Unten ist mein useContext-Anbieter.

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

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

Der Wert des Status kommt von useReducer und aktualisiert alles ist in Ordnung

So verwende ich den useContext Hook in der Navigationsleiste, um die Gesamtzahl der Artikel im Warenkorb zu erhalten

const cartItems = useContext(CartContext);

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

Aber wenn sich der Status ändert, zeigt die Navigationsleiste nicht die aktualisierte Gesamtzahl der Artikel im Warenkorb an. Bitte helfen Sie mir.

Dies ist meine useReducer-Funktion und alles, was sie aktualisiert. Ich habe die Funktionalität überprüft, indem ich console.log() ausgeführt habe. Alles, was zurückgegeben wird, ist in Ordnung, einschließlich 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

当您使用 useReducer 时，它会返回当前状态，对吧？就你而言，该状态是一个对象。因此，您可以直接从该状态对象获取 totalItems 。例如：

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

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

因此，这样，totalItems 就会从状态对象中直接拉出，您可以在任何需要的地方使用它。