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(initialState);

Unten ist mein useContext-Anbieter.

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 ( 
{cartItems.totalItems}
` )

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}; }```