Реагируй контекст продолжай сбрасывать

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 секунды, и оно сбрасывается снова. «Пользователь снова входит в систему автоматически».

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>