uso React (primer proyecto y, por lo tanto, no estoy tan familiarizado con esto). Una vez que el inicio de sesión sea correcto, quiero mostrar calender.js. El problema es que no logro abrir calender.js.
En el método doLogin() en la clase LoginForm.js se verifica si la respuesta del servidor es -1, si es != -1, entonces el inicio de sesión fue exitoso y Calendar.js debe abrirse (lo que en realidad está previsto en el método showCalendar()).
He intentado varias formas, pero ninguna ha funcionado. ¿Tienen alguna sugerencia de solución?
Ya probé "Redirect" y "userhistory()" (es posible que también haya cometido un error allí, porque siempre recibí un error con los hooks en userHistory que no pude resolver).
Código
import React, { Component } from "react"; import { observer } from "mobx-react"; import ReactDOM from "react-dom"; import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; import UserStore from "./stores/UserStore"; import Home from "./Home"; import UserList from "./UserList"; import Calendar from "./Calendar"; class App extends React.Component { componentDidUpdate() { if (UserStore.id != -1 && UserStore.id != 0) { console.log(UserStore.id); console.log("Calendar"); } } render() { return ( <Router> <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/calendar">Calendar</Link> </li> <li> <Link to="/userlist">Userlist</Link> </li> </ul> </nav> {/* A <Switch> looks through its children <Route>s and renders the first one that matches the current URL. */} <Switch> <Route path="/calendar"> <Calendar /> </Route> <Route path="/userlist"> <UserList /> </Route> <Route path="/"> <Home /> </Route> </Switch> </div> </Router> ); } } export default App; ReactDOM.render(<App />, document.querySelector("#app"));
He incluido los enlaces como prueba, a través de ellos puedo abrir Calendar.js sin ningún problema. Sin embargo, quiero que suceda automáticamente cuando el inicio de sesión sea correcto (el método doLogin() en LoginForm verifica la respuesta del servidor).
Código
import React, { Component } from "react"; import ReactDOM from "react-dom"; import UserStore from "./stores/UserStore"; import LoginForm from "./components/LoginForm"; import RegisterForm from "./components/RegisterForm"; class Home extends React.Component { render() { return ( <div className="home"> <LoginForm /> <RegisterForm /> </div> ); } } export default Home;
Código
import React, { Component } from "react"; import ReactDOM from "react-dom"; import UserStore from "./stores/UserStore"; import LoginForm from "./components/LoginForm"; import RegisterForm from "./components/RegisterForm"; class Home extends React.Component { render() { return ( <div className="home"> <LoginForm /> <RegisterForm /> </div> ); } } export default Home;
Código
import axios from "axios"; import React from "react"; import InputField from "./InputField"; import SubmitButton from "./SubmitButton"; import UserStore from "../stores/UserStore"; import Header from "./Header"; import Calendar from "../Calendar"; import { Link, Redirect } from "react-router-dom"; import { result } from "lodash"; import { Route, Router, useHistory } from "react-router"; class LoginForm extends React.Component { constructor(props) { super(props); this.state = { email: "", password: "", buttonDisabled: false, }; } setInputValue(property, value) { value = value.trim(); if (value.length > 25) { return; } this.setState({ [property]: value, }); } resetForm() { this.setState({ email: "", password: "", buttonDisabled: false, }); } showCalendar() { console.log("showCalendar"); } doLogin() { if (!this.state.email) { console.log("'E-Mail' no debe estar vacío"); return; } if (!this.state.password) { console.log("'Contrasena' no debe estar vacía"); return; } this.setState({ buttonDisabled: true, }); axios .post( "http://localhost:8080/api/login", { userEmail: this.state.email, userPassword: this.state.password, }, { withCredentials: true, //se pone una Cookie } ) .then((response) => { if (response.data != -1) { console.log("Inicio de sesión exitoso", response); UserStore.isLoggedIn = true; UserStore.id = response.data; //current user id será asignado UserStore.email = this.state.email; this.showCalendar(); console.log("current_user_id: " + UserStore.id); this.resetForm(); } else { console.log("Error de inicio de sesión", response); this.resetForm(); } }) .catch((error) => { console.log("Error de API-Call", error); this.resetForm(); }); } render() { return ( <div className="loginForm"> <Header name="Login" /> <InputField type="email" placeholder="Email" value={this.state.email ? this.state.email : ""} onChange={(value) => this.setInputValue("email", value)} /> <InputField type="password" placeholder="Password" value={this.state.password ? this.state.password : ""} onChange={(value) => this.setInputValue("password", value)} /> <SubmitButton text="Login" disabled={this.state.buttonDisabled} onClick={() => this.doLogin()} /> </div> ); } } export default LoginForm;
La respuesta del servidor se verifica en el método doLogin(). Si la respuesta es !=-1, el inicio de sesión fue exitoso y quiero abrir el archivo calendar.js, lo que debería suceder en el método showCalendar.
Código
import { extendObservable } from "mobx"; /** * Guardar los datos del usuario actualmente conectado */ class UserStore { constructor() { extendObservable(this, { isLoggedIn: false, email: "", userName: "", id: 0, }); } } export default new UserStore();
Saludos cordiales y gracias de antemano por la ayuda.