Передача this.props.history.push атрибуту одной переменной в другом компоненте.РЕАКТ JS

Question

Я создал одну форму пароля, которая должна передавать значения одной переменной, локализованной в другой js.

Область действия:

App.js
|
|
|----- Login.jsx
|
|
|_____ Home.jsx
         |----- import { getMarvelCharacters } from '../lib/apiCalls';

App.js

const Home = lazy(() => import('./Components/Home'));
const Login = lazy(() => import('./Components/Login'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Login}/>
        <Route path="/home" component={Home}/>
      </Switch>
    </Suspense>
  </Router>
);

Login.jsx

    handleSubmit = event => {
    //The alert show both value ok..
        alert('publickey is: ' + this.state.publickey + ' and privatekey is: ' + this.state.privatekey);
        event.preventDefault();
        try {
            this.props.history.push({
                pathname: '/home',
                state: {
                    publickey: this.state.publickey,
                    privatekey: this.state.privatekey,
                }
            })
        } catch (e) {
            alert(e.message);
        }
    }

Но мне нужно взять эти значения и указать их в apiCalls.js

const PUBLIC_KEY = " here ";
const PRIVATE_KEY = " here ";

Пожалуйста, какой лучший способ сделать это

Answer 1

вы можете использовать Redux для передачи данных из компонента входа в систему в хранилище избыточных данных и использовать их в другом компоненте приложения

и если вы не хотите использовать Redux, вам нужно создать функции внутри основного корневого компонента (обычно это App.js) и передать эти функции внутри дочерних компонентов с помощью реквизита, потомки будут размножаться значения для корневого компонента, или вы можете создавать функции внутри дочерних элементов и распространять значения на корневой компонент (зависит от вашего варианта использования каждого компонента, например, будет ли эта функция выполнена для одного компонента или всех компонентов)

для повторного использования этих значений вы передаете состояние корневого компонента как подпорки внутри дочернего элемента

надеюсь, мой ответ немного помог