elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado:


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Abrir React Page
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Abrir React Page  (Leído 2,141 veces)
TickTack


Desconectado Desconectado

Mensajes: 428


CipherX


Ver Perfil
Abrir React Page
« en: 6 Agosto 2021, 02:35 am »

Hola a todos,

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
  1. import React, { Component } from "react";
  2. import { observer } from "mobx-react";
  3. import ReactDOM from "react-dom";
  4. import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
  5. import UserStore from "./stores/UserStore";
  6. import Home from "./Home";
  7. import UserList from "./UserList";
  8. import Calendar from "./Calendar";
  9.  
  10. class App extends React.Component {
  11.  componentDidUpdate() {
  12.    if (UserStore.id != -1 && UserStore.id != 0) {
  13.      console.log(UserStore.id);
  14.      console.log("Calendar");
  15.    }
  16.  }
  17.  
  18.  render() {
  19.    return (
  20.      <Router>
  21.        <div>
  22.          <nav>
  23.            <ul>
  24.              <li>
  25.                <Link to="/">Home</Link>
  26.              </li>
  27.              <li>
  28.                <Link to="/calendar">Calendar</Link>
  29.              </li>
  30.              <li>
  31.                <Link to="/userlist">Userlist</Link>
  32.              </li>
  33.            </ul>
  34.          </nav>
  35.  
  36.          {/* A <Switch> looks through its children <Route>s and
  37.                 renders the first one that matches the current URL. */}
  38.          <Switch>
  39.            <Route path="/calendar">
  40.              <Calendar />
  41.            </Route>
  42.            <Route path="/userlist">
  43.              <UserList />
  44.            </Route>
  45.            <Route path="/">
  46.              <Home />
  47.            </Route>
  48.          </Switch>
  49.        </div>
  50.      </Router>
  51.    );
  52.  }
  53. }
  54.  
  55. export default App;
  56.  
  57. ReactDOM.render(<App />, document.querySelector("#app"));
  58.  

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
  1. import React, { Component } from "react";
  2. import ReactDOM from "react-dom";
  3. import UserStore from "./stores/UserStore";
  4. import LoginForm from "./components/LoginForm";
  5. import RegisterForm from "./components/RegisterForm";
  6.  
  7. class Home extends React.Component {
  8.  render() {
  9.    return (
  10.      <div className="home">
  11.        <LoginForm />
  12.        <RegisterForm />
  13.      </div>
  14.    );
  15.  }
  16. }
  17.  
  18. export default Home;
  19.  

Código
  1. import React, { Component } from "react";
  2. import ReactDOM from "react-dom";
  3. import UserStore from "./stores/UserStore";
  4. import LoginForm from "./components/LoginForm";
  5. import RegisterForm from "./components/RegisterForm";
  6.  
  7. class Home extends React.Component {
  8.  render() {
  9.    return (
  10.      <div className="home">
  11.        <LoginForm />
  12.        <RegisterForm />
  13.      </div>
  14.    );
  15.  }
  16. }
  17.  
  18. export default Home;
  19.  

Código
  1. import axios from "axios";
  2. import React from "react";
  3. import InputField from "./InputField";
  4. import SubmitButton from "./SubmitButton";
  5. import UserStore from "../stores/UserStore";
  6. import Header from "./Header";
  7. import Calendar from "../Calendar";
  8. import { Link, Redirect } from "react-router-dom";
  9. import { result } from "lodash";
  10. import { Route, Router, useHistory } from "react-router";
  11.  
  12. class LoginForm extends React.Component {
  13.  constructor(props) {
  14.    super(props);
  15.    this.state = {
  16.      email: "",
  17.      password: "",
  18.      buttonDisabled: false,
  19.    };
  20.  }
  21.  
  22.  setInputValue(property, value) {
  23.    value = value.trim();
  24.    if (value.length > 25) {
  25.      return;
  26.    }
  27.    this.setState({
  28.      [property]: value,
  29.    });
  30.  }
  31.  
  32.  resetForm() {
  33.    this.setState({
  34.      email: "",
  35.      password: "",
  36.      buttonDisabled: false,
  37.    });
  38.  }
  39.  showCalendar() {
  40.    console.log("showCalendar");
  41.  }
  42.  
  43.  doLogin() {
  44.    if (!this.state.email) {
  45.      console.log("'E-Mail' no debe estar vacío");
  46.      return;
  47.    }
  48.    if (!this.state.password) {
  49.      console.log("'Contrasena' no debe estar vacía");
  50.      return;
  51.    }
  52.    this.setState({
  53.      buttonDisabled: true,
  54.    });
  55.    axios
  56.      .post(
  57.        "http://localhost:8080/api/login",
  58.        {
  59.          userEmail: this.state.email,
  60.          userPassword: this.state.password,
  61.        },
  62.        {
  63.          withCredentials: true, //se pone una Cookie
  64.        }
  65.      )
  66.      .then((response) => {
  67.        if (response.data != -1) {
  68.          console.log("Inicio de sesión exitoso", response);
  69.          UserStore.isLoggedIn = true;
  70.          UserStore.id = response.data; //current user id será asignado
  71.          UserStore.email = this.state.email;
  72.          this.showCalendar();
  73.          console.log("current_user_id: " + UserStore.id);
  74.          this.resetForm();
  75.  
  76.        } else {
  77.          console.log("Error de inicio de sesión", response);
  78.          this.resetForm();
  79.        }
  80.      })
  81.      .catch((error) => {
  82.        console.log("Error de API-Call", error);
  83.        this.resetForm();
  84.      });
  85.  }
  86.  
  87.  render() {
  88.    return (
  89.      <div className="loginForm">
  90.        <Header name="Login" />
  91.        <InputField
  92.          type="email"
  93.          placeholder="Email"
  94.          value={this.state.email ? this.state.email : ""}
  95.          onChange={(value) => this.setInputValue("email", value)}
  96.        />
  97.        <InputField
  98.          type="password"
  99.          placeholder="Password"
  100.          value={this.state.password ? this.state.password : ""}
  101.          onChange={(value) => this.setInputValue("password", value)}
  102.        />
  103.        <SubmitButton
  104.          text="Login"
  105.          disabled={this.state.buttonDisabled}
  106.          onClick={() => this.doLogin()}
  107.        />
  108.  
  109.      </div>
  110.    );
  111.  }
  112. }
  113. export default LoginForm;
  114.  

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
  1. import { extendObservable } from "mobx";
  2.  
  3. /**
  4.  * Guardar los datos del usuario actualmente conectado
  5.  */
  6.  
  7. class UserStore {
  8.  constructor() {
  9.    extendObservable(this, {
  10.      isLoggedIn: false,
  11.      email: "",
  12.      userName: "",
  13.      id: 0,
  14.    });
  15.  }
  16. }
  17.  
  18. export default new UserStore();
  19.  


Saludos cordiales y gracias de antemano por la ayuda.


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
crear app hibrida. ¿react native ó ionic2?
Desarrollo Web
OssoH 1 2,573 Último mensaje 2 Julio 2017, 19:00 pm
por MinusFour
[Duda] Auth con Google Firebase + React JS Web
Desarrollo Web
Gustavo_Hack 2 2,316 Último mensaje 22 Julio 2017, 19:16 pm
por Gustavo_Hack
desarrollar juego con react native
Programación General
yina07 0 2,682 Último mensaje 25 Marzo 2019, 17:07 pm
por yina07
Usar react offline?
Desarrollo Web
@XSStringManolo 2 3,552 Último mensaje 2 Mayo 2020, 08:58 am
por @XSStringManolo
Pregunta sobre React
Desarrollo Web
Cergath 2 3,601 Último mensaje 12 Noviembre 2020, 18:15 pm
por Cergath
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines