反應上下文不斷重置

Question

我有這個文件，其中包含我所有的全局路由/全局 state。

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

問題是當我嘗試使用此 function 注銷時，全局 state 更改了大約 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);
    })
 }

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>