Tengo un proveedor como este:
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); }mi senario:
dentro component1 1, actualicé la variable deliveryPersion de esta manera:
... cartContext.updateDeliveryPersion('other') dentro component2 2 actualicé el objeto del coupon :
const data = {/**/} cartContext.updateCoupon(data) en este aquí deliveryPersion cambió al valor predeterminado. (valor own )
donde esta mi problema
Puede pasar lo que necesite para reutilizar en su valor CartContext.Provider, por ejemplo:
<CardContext.Provider value={{state, updateCoupon, updateDeliveryPersion}}> ... You need to call the components that will use the context here </CardContext.Provider>luego en los componentes de sus hijos:
const { state, updateCoupon, updateDeliveryPersion } = useContext(CardContext);O simplemente lo que necesita usar en el componente. Espero que esto pueda ayudar. Puede leer más aquí: https://en.reactjs.org/docs/context.html .
Ya ha definido su useCardContext , por lo que puede usarlo en su componente funcional de esta manera:
// Let say you want to use the updateDeliveryPersion method from your hook const {updateDeliveryPersion} = useCardContext();Por cierto, si desea establecer un nuevo estado con un valor anterior, debe usar una devolución de llamada en lugar de pasar el valor del estado confirmado actual:
const updateCoupon = (_coupon) => { setState(prev=>{...prev,coupon: _coupon}) } Además, también puede almacenar en caché el valor de su contexto con useMemo para evitar que el niño vuelva a renderizarse (que suele ser toda su aplicación en este caso).