如何在 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

请不要在窗口中存储持久数据！

Window 是全局的，但它的范围与新的页面加载有关。

要获得一致的数据，您应该考虑使用持久性存储，例如 localStorage、sessionStorage 和 cookie。

在这里查看更多示例What is the difference between localStorage, sessionStorage, session and cookies?