Realmente no entiendo por qué esto no funciona, básicamente, tengo un componente de encabezado con su propio contexto. Por otro lado, tengo un componente popOver que va dentro del encabezado, y este popOver también tiene su propio contexto.

Ahora, hay una lista de elementos que se representan dentro del popOver, el usuario elige qué elementos representar, y dicha lista debe representarse simultáneamente en el encabezado, por esa razón estoy tratando de mantener ambos contextos sincronizados, aparece el problema. cuando trato de consumir el contexto del encabezado dentro del contexto popOver, los valores consumidos parecen no estar definidos.

 const HeaderContext = createContext(); export const HeaderProvider = ({ children }) => { const [headChipList, setHeadChipList] = useState([]); const [isChipOpen, setIsChipOpen] = useState(false); useEffect(() => { if (headChipList.length) setIsChipOpen(true); }, [headChipList]); return ( <HeaderContext.Provider value={{ headChipList, setHeadChipList, isChipOpen, setIsChipOpen }}> {children} </HeaderContext.Provider> ); }; export const useHeaderContext = () => { const context = useContext(HeaderContext); if (!context) throw new Error('useHeaderContext must be used within a HeaderProvider'); return context; };

Como puede ver al final, hay un enlace personalizado que permite un consumo más fácil del contexto y también es una protección en caso de que el enlace personalizado se llame contexto externo, el contexto popOver sigue este mismo patrón:

 import React, { useState, useContext, createContext, useEffect } from 'react'; import { useHeaderContext } from '(...)/HeaderProvider'; const PopoverContext = createContext(); export const PopoverProvider = ({ children }) => { const { setHeadChipList, headChipList } = useHeaderContext; // this guys are undefined const [menuValue, setMenuValue] = useState('Locations with Work Phases'); const [parentId, setParentId] = useState(''); const [chipList, setChipList] = useState([]); const [locations, setLocations] = useState([]); useEffect(() => setChipList([...headChipList]), [headChipList]); useEffect(() => setHeadChipList([...chipList]), [chipList, setHeadChipList]); return ( <PopoverContext.Provider value={{ menuValue, setMenuValue, chipList, setChipList, parentId, setParentId, locations, setLocations }} > {children} </PopoverContext.Provider> ); }; export const usePopover = () => { const context = useContext(PopoverContext); if (!context) throw new Error('usePopover must be used within a PopoverProvider'); return context; };

Realmente agradecería cualquier comentario destacado sobre este error, con suerte, podré aprender cómo evitar este tipo de error en el futuro.