React 上下文不断重置

Question

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

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 秒，然后再次重置。"The user gets logged in again automatically"。

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

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

  }

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

如何停止重新登录"re-change of the state" AuthContext "Global state"

这是我的登录信息

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

Answer 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>

React 上下文不断重置

React context keep resetting

javascript

reactjs

react-router

react-context

react-state