javascript - 在提供程序中使用函数缺少以前的状态 - nextjs

Question

我有这样的提供者：

import {createContext, useContext, useState} from 'react'

// Create Context object.
const CartContext = createContext({
   deliveryPersion:'own',//or other
   coupon:{},
   updateCoupon: (obj) => {},
   updateDeliveryPersion: (type) => {},
})



// Export Provider.
export function CartProvider(props) {

   const updateCoupon = (_coupon) => {
      setState({...state,coupon: _coupon})
   }


  const updateDeliveryPersion = (type) => {
     setState({...state,deliveryPersion: type})
   }



   const initState = {
      deliveryPersion:'own',
      coupon:{},
      updateCoupon:updateCoupon,
      updateDeliveryPersion:updateDeliveryPersion
   }

   const [state, setState] = useState(initState)
    
    return (
       <CartContext.Provider value={state}>
        {props.children}
       </CartContext.Provider>
    )
}

// Export useContext Hook.
export function useCartContext() {
    return useContext(CartContext);
}

我的情景：我有两个组件。component1和component1。

在里面component1我更新了deliveryPersion这样的变量：

...
cartContext.updateDeliveryPersion('other')

在里面component2我更新了coupon对象：

const data = {/**/}
cartContext.updateCoupon(data)

在此此处deliveryPersion更改为默认值。（own值）。换句话说，我使用更新功能丢失了当前值。

我的问题在哪里？

例如第一个组件：

const cartContext =  useCartContext()
cartContext.updateDeliveryPersion(type)

标签： javascriptreactjstypescriptnext.js