Экспорт двух констант из одного компонента в другой

Это базовая настройка контекста. В этом конкретном примере показано создание контекста, оболочки, которая содержит состояние внутри контекста, и пользовательского хука для доступа к значениям контекста из любого компонента.

Компонент провайдера выглядит как обычный компонент, за исключением части Context.Provider. Это часть контекста, которая предоставляет значения контекста своим потомкам.

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

Компонент провайдера должен иметь компоненты, которым нужны данные, в качестве потомков, как в примере ниже.

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

Теперь, когда все потомки имеют доступ, мы можем использовать настраиваемый хук для использования и управления выставленными значениями.

Наш контекст просто предоставляет состояние, поэтому реализация работает точно так же, как вы использовали бы хук useState.

Единственное отличие теперь состоит в том, что все компоненты, использующие контекст, будут обновляться всякий раз, когда какой-либо компонент обновляет состояние внутри контекста.

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 handleChangeEvent(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 = {handleChangeEvent} type = "text" name = "name" autoFocus placeholder = "Enter location here."/>
      <button type = "submit" onClick = {handleClick}>Forecast</button> 
    </div>
  );
}

Вы не можете экспортировать состояние вне функционального компонента как константу, но есть множество решений, которые вы можете использовать для решения своей проблемы.

1. Использование хуков React.createContext и React.useContext. Если вы определите хук в родительском элементе всех компонентов, которым он нужен, у вас не будет проблем с доступом (чаще всего этим родителем является компонент приложения).

2. Использование менеджера состояний, например Redux. Это позволяет вам получать доступ к геттерам и сеттерам в любом месте приложения. Примечание. Redux добавляет в приложение немного шаблонного кода, поэтому, если вы еще не используете его, отдайте предпочтение первому решению.

3. Сохранение координат в localStorage. IMO это почти никогда не является хорошим решением, потому что не позволяет вам получать уведомления об обновлении координат, но хорошо подходит для некоторых сценариев.