Mi situación: después de iniciar sesión, trato de obtener el nombre de usuario y guardarlo en la tienda redux después de esta redirección desde el inicio de sesión a la página de inicio (en esta página, muestro una lista de tareas) y obtengo: No puedo realizar una actualización de estado de React en un componente sin montar. Esto no es operativo, pero indica una pérdida de memoria en su aplicación.
Intento el truco habitual isMounted pero no es de ayuda.
Iniciar sesión.js
function getUsername(){ let username = "" const headers = { 'Accept': 'application/json', 'Content-Type': 'application/json', }; try { axios.get(`${process.env.REACT_APP_API_URL}/api/get_username/`,{ headers: headers, }) .then(response => username = response.data["username"]) .catch(error => setResponse(error.response)) } catch (err) { console.log(err) } return username } const loginSubmit = e => { e.preventDefault() const headers = { 'Accept': 'application/json', 'Content-Type': 'application/json', 'X-CSRFToken': csrftoken, }; const body = {username: username, password: password} try { axios.post(`${process.env.REACT_APP_API_URL}/api/login/`, body,{ headers: headers, }) .then(response => setResponse(response)) .catch(error => setResponse(error.response)) } catch (err) { console.log(err) } dispatch({type: "SET_NAME", name:getUsername()}) Cookies.set("logged_in", "yes") navigate("/", {replace:true}) };Inicio.js
function getTasks(isMounted){ const headers = { 'Accept': 'application/json', 'Content-Type': 'application/json', }; try { axios.get(`${process.env.REACT_APP_API_URL}/api/tasks/`, { headers: headers,}) .then(response => {if(isMounted ){setTasks(response.data)}}) .catch(error => setTasks(error.response)) } catch (err) { console.log(err) } } useEffect(() => { let isMounted = true; getTasks(isMounted); return () => { isMounted = false; }; }, []);Puede utilizar el almacenamiento local.
Establecer elemento:
localStorage.setItem("name", JSON.stringify(name))Obtiene el objeto:
localStorage.getItem("name")