how to use function inside provider-CodePudding

I have a provider like this:

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

My senario:

inside component1 I updated the deliveryPersion variable like this:

...
cartContext.updateDeliveryPersion('other')

inside component2 I updated coupon object:

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

at this here deliveryPersion changed to default value.(own value)

where is my problem?

CodePudding user response：

You can pass whatever you need to reuse on your CartContext.Provider value, for instance:

<CardContext.Provider value={{state, updateCoupon, updateDeliveryPersion}}>
  ... You need to call the components that will use the context here
</CardContext.Provider>

then in your children components:

const { state, updateCoupon, updateDeliveryPersion } = useContext(CardContext);

Or just what you need to use in the component. Hope this could help. You can read more here: https://en.reactjs.org/docs/context.html.

CodePudding user response：

You have already defined your useCardContext hook, so you can use it in your functional component like this:

// Let say you want to use the updateDeliveryPersion method from your hook
const {updateDeliveryPersion} = useCardContext();

By the way, if you want to set a new state with a prev value, you should use a callback instead of passing the current commited state value:

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

Also, you can also cache your context value with useMemo to avoid causing extra rerendering on the child (which is usually your whole app in this case).