Как получить доступ к глобальной (оконной) переменной в React JS

Question

Я использую React JS. У меня есть страница входа в систему, которая получает данные в качестве ответа от конечной точки. Я храню различные компоненты из ответа в окне. переменные, потому что они должны быть доступны в разных компонентах. И это работает только первоначально, когда новый компонент загружен, после того, как он обновил окно. переменная становится пустой.

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

handleSubmit(event) {
event.preventDefault()

axios
  .post("EDN POINT LINK",
    {
      email: this.state.email,
      password: this.state.password

    })
  .then((response) => {

    console.log(response);

    // STORING ID
    window.id = window.responseDetails.map(
      mID => mID.id
    )
    console.log('ID is: ' + window.id);

    // STORING TOKEN
    window.token = window.responseDetails.map(
      mToken => mToken.token
    )
    console.log('TOKEN is: ' + window.token);

    // STORING ERROR
    window.error = window.responseDetails.map(
      mError => mError.error
    )
    console.log('ERROR is: ' + window.error);

И это компонент, к которому я получаю доступ к окну. переменная:

 render() {

    console.log(window.id)
    return (

    )
}

Если бы у меня было больше времени, я бы реализовал что-то вроде Redux или Context, но, к сожалению, нет, потому что я довольно новичок в React JS.

Answer 1

Пожалуйста, не храните постоянные данные в окне!

Окно является глобальным, но его область связана с загрузкой страницы fre sh.

Чтобы иметь согласованные данные, вы должны рассмотрим постоянные хранилища, такие как localStorage, sessionStorage и cookie.

Просмотрите здесь дополнительные примеры В чем разница между localStorage, sessionStorage, session и cookie?