Esta es una configuración básica de un contexto. Este ejemplo en particular muestra la creación de un contexto, un contenedor que contiene el estado dentro del contexto y un enlace personalizado para acceder a los valores de contexto desde cualquier componente.

El componente del proveedor se parece a un componente normal excepto por la parte Context.Provider . Esta es la parte del contexto que expone los valores del contexto a sus descendientes.

 // coordinates-context.js import { createContext, useContext, useState } from 'react'; /** * Create a new context. */ const CoordinatesContext = createContext(); /** * Create a provider wrapper which is responsible for the state * and children of the context. In a lot of ways it works just like * a normal component, except for the Provider part, which is special * for the Context API. */ export const CoordinatesProvider = ({ children }) => { const [coordinates, setCoordinates] = useState({ lat: null, lng: null }); return ( <CoordinatesContext.Provider value={[coordinates, setCoordinates]}> {children} </CoordinatesContext.Provider> ); }; /** * This custom hook will allow us you use the context in any component. */ export const useCoordinatesContext = useContext(CoordinatesContext);

El componente del proveedor debe tener los componentes que necesitan los datos como descendientes, como el ejemplo a continuación.

 <App> <CoordinatesProvider> <Header/> <OtherComponent/> </CoordinatesProvider> </App>

Ahora que todos los descendientes tienen acceso, podemos usar el gancho personalizado para usar y manipular los valores expuestos.

Nuestro contexto simplemente expone un estado, por lo que la implementación funciona de la misma manera que usaría un gancho useState .

La única diferencia ahora es que todos los componentes que usan el contexto se actualizarán siempre que cualquier componente actualice el estado dentro del contexto.

 import React, { useState } from 'react'; import { useCoordinatesContext } from '../your-path-to/coordinates-context.js'; import axios from 'axios'; function Header() { const [text, setText] = useState(""); /** * The hook exposes the useState values from the context provider. */ const [coordinates, setCoordinates] = useCoordinatesContext(); function handleChange(event) { setText(event.target.value); } function handleClick() { const geoCoderURL = "http://api.openweathermap.org/geo/1.0/direct?q=" + text + "&limit=5&appid={apikey}"; function getCoordinates(url) { axios.get(url).then((response) => { /** * Update context state. */ setCoordinates({ lat: response.data[0].lat, lng: response.data[0].lon }); }); } getCoordinates(geoCoderURL); } return ( <div> <h1>Five Day Forecast</h1> <input onChange={handleChange} type="text" name="name" autoFocus placeholder="Enter location here."/> <button type="submit" onClick={handleClick}>Forecast</button> </div> ); }

No puede exportar el estado fuera del componente funcional como una constante, pero hay muchas soluciones que puede adoptar para resolver su problema.

1. Usando el gancho React.createContext y React.useContext. Si define el gancho en el padre de todos los componentes que lo necesitan, no tendrá problemas con el acceso (la mayoría de las veces este padre es el componente de la aplicación).

2. Usando un administrador de estado, como Redux. Esto le permite acceder a getters y setters en cualquier parte de la aplicación. Nota: Redux agrega un poco de repetitivo en la aplicación, por lo que si aún no lo usa, prefiera la primera solución.

3. Guardando las coordenadas en el localStorage. En mi opinión, esta casi nunca es una buena solución porque no permite que se le notifique cuando se actualizan las coordenadas, pero encaja bien en algunos escenarios.