反应上下文不断重置

Posted 2023-04-14

【中文标题】反应上下文不断重置

【英文标题】：React context keep resetting

【发布时间】：2020-07-20 03:40:51

【问题描述】：

我有这个文件，其中包含我所有的全局路由/全局状态。

import React,  useEffect, useState, useContext  from "react";
import ReactDOM from 'react-dom';



const globalState = 
  email: null,
  token: null
;

export const  AuthContext = React.createContext(globalState);

function Routing() 

  const [currentUser, setCurrentUser] = useState(globalState);
  return (
    <AuthContext.Provider value=[currentUser, setCurrentUser]>

      </AuthContext.Provider>
    );


ReactDOM.render(<Routing />, document.getElementById("app"));      
serviceWorker.unregister();

问题是当我尝试使用此功能注销时，全局状态会更改大约 3 秒，然后再次重置。“用户自动再次登录”。

const [user, setUser] = useContext(AuthContext);

const logOut = () => 
    setUser(email: null, token:null)

  

我试图查看是否有任何特殊方法可以更改全局上下文，但我没有找到任何东西。

如何停止AuthContext“全局状态”的重新登录“状态重新改变”

这是我的登录信息

const login = e => 
    const form = document.getElementById('loginForm');
    e.preventDefault();
      setInterval(() => 
        setUser(email, token);
      , timeOut);
    )
 

【问题讨论】：

为什么setInterval(() => 正好是 3 秒？您没有怀疑会再次登录吗？

我的意思是输入：设置超时非常感谢您可以指导吗？

是的，你可以给我发邮件

正如我在您的 Facebook 帖子中所说以及@HMR 在他的回答中暗示的那样，删除不相关的代码可能会有很大帮助。你能做到吗？

【参考方案1】：

您的代码没有演示您所描述的内容，这是您的代码，我没有看到它在 3 秒后神奇地退出，所以您一定是在其他地方做错了什么：

const  useState, useContext  = React;

const globalState = 
  email: null,
  token: null,
;

const AuthContext = React.createContext(globalState);
const LoginOut = () => 
  const [user, setUser] = useContext(AuthContext);

  const logOut = () => 
    setUser( email: null, token: null );
  ;
  const login = () => 
    setUser( email: 'hi', token: 123 );
  ;
  return user.email ? (
    <button onClick=logOut>log out user.email</button>
  ) : (
    <button onClick=login>log in</button>
  );
;
function Routing() 
  const [currentUser, setCurrentUser] = useState(
    globalState
  );
  return (
    <AuthContext.Provider
      value=[currentUser, setCurrentUser]
    >
      <LoginOut />
    </AuthContext.Provider>
  );


ReactDOM.render(
  <Routing />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：

我添加了我的登录功能