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