Komponen bar navigasi tidak dipaparkan semula pada perubahan keadaan
Saya cuba mencipta troli beli-belah. Saya mencipta konteks dan melepasi keadaan sebagai nilai apabila menekan butang kenaikan dan pengurangan pada troli, kiraan item saya berubah tetapi apabila saya menggunakan konteks yang sama dalam komponen bar navigasi, dalam troli Jumlah bilangan item tidak akan berubah . Saya melampirkan coretan kod di bawah
Di sinilah saya mencipta konteks
const initialState:initialType = {
cartItems:cartItems,
totalItems:cartItems.reduce((accumulator, object) => {
return accumulator + object.quantity
}, 0),
totalAmount:0
}
export const CartContext = createContext<initialType|null>(initialState);
Di bawah ialah pembekal useContext saya.
<CartContext.Provider value={{...state}}>
<ContextCart removeItems={removeItems} increment={increment} decrement={decrement}/> </CartContext.Provider>
Nilai status datang daripada useReducer dan ia mengemas kini semuanya baik-baik saja
Ini adalah cara saya menggunakan useContext Hook dalam bar navigasi untuk mendapatkan jumlah bilangan item dalam troli beli-belah
const cartItems = useContext(CartContext);
return (
<div>{cartItems.totalItems}</div>`
)
Tetapi apabila status berubah, bar navigasi tidak memaparkan semula jumlah bilangan item yang dikemas kini dalam troli, tolong bantu saya.
Ini adalah fungsi useReducer saya dan semua yang dikemas kini. Saya telah menyemak kefungsiannya dengan melaksanakan console.log(). Semua yang dikembalikan adalah baik, termasuk 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};
}```