Komponen bar navigasi tidak dipaparkan semula pada perubahan keadaan

Question

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

Answer 1

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

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

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

Jadi dengan cara ini, totalItems ditarik terus dari objek keadaan dan anda boleh menggunakannya di mana sahaja anda memerlukannya.