reactjs - 如何在 React JS 中访问全局 (window.) 变量

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?