我正在尝试创建一个购物车。我已经创建了一个上下文，并在按下购物车上的递增和递减按钮时将状态作为一个值传递给我，我在购物车中的项目计数正在改变，但当我在导航栏组件中使用相同的上下文时，购物车中的项目总数没有改变。我在下面附上代码片段
这是我创建我的上下文的地方

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

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

下面是我的useContext提供程序。

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

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

state的值来自useReducer，它正在更新所有内容
这就是我如何在导航栏中使用useContext钩子来获取购物车中的物品总数

const cartItems = useContext(CartContext);

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

但是每当状态改变时，导航栏永远不会重新呈现购物车中更新的项目总数，请帮助我。
这是我的useReducer函数，它很好地更新了一切。我已经通过执行console.log（）检查了它的功能。它会很好地返回所有东西，包括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};
    }```