Me gustaría crear un estado global para realizar un seguimiento de algunas propiedades que me gustaría transmitir a varios componentes.
const initialState = { nickname: '', selectedRoom: null, rooms: [], createdRoomTopic: '', twilioToken: '', device: null }; const RoomContext = createContext(null); export const RoomContextProvider = ({ children }) => { const[state, setState] = useState(initialState); return ( <RoomContext.Provider value={[state, setState]}>{children}</RoomContext.Provider> ) }; export const useGlobalState = () => { const value = useContext(RoomContext) if(value === undefined) throw new Error('Please add RoomContextProvider'); return value; }Sin embargo, cuando uso este 'estado global' en un componente
import { useGlobalState } from '../../context/RoomContextProvider'; .... const [state, setState] = useGlobalState();Mi página no se muestra y recibo el mensaje de error:
Uncaught TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator)) ACTUALIZAR Aquí hay un ejemplo de donde usé useGlobalState
import { useGlobalState } from '../../context/RoomContextProvider'; ... <useGlobalState> <SignupForm/> <useGlobalState/>Probablemente no haya envuelto la invocación de la API de contexto a través useGlobalState dentro del proveedor de contexto en un componente principal, que debe ser para acceder al contexto.
Actualización: en su pregunta actualizada, está envolviendo el gancho como elemento JSX, lo cual es incorrecto. Tiene que hacer el envoltorio con el proveedor y luego el enlace funcionará en cualquier componente que exista debajo del proveedor en el árbol.
Puede verificar este código modificado que hace exactamente eso: https://stackblitz.com/edit/react-jfubkz?file=src%2FApp.js
Puede leer más sobre el uso de React Context aquí: https://beta.reactjs.org/apis/usecontext
También su intento de manejar
if (value === undefined) throw new Error('Please add RoomContextProvider');no funciona porque el valor es nulo inicialmente según la inicialización como se muestra a continuación
const RoomContext = createContext(null);