时间戳

首页 > 解决方案 > 反应上下文不断重置

javascript - 反应上下文不断重置

问题描述

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

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);
    })
 }

标签： javascriptreactjsreact-routerreact-contextreact-state

解决方案

您的代码没有演示您描述的内容，这是您的代码，我没有看到它在 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>

推荐阅读