Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

159
Vistas
¿Cómo puedo mostrar los datos de usuario almacenados en JSX?

Creé un formulario con éxito para cambiar los datos del usuario, pero de alguna manera no puedo mostrar los datos del usuario ya guardados con el siguiente código. ¿Cómo puedo mostrar los datos de usuario almacenados para crear una buena vista de perfil? ¿Por qué lo siguiente no funciona a pesar de que utilicé el mismo método para editar el formulario dirigido al objeto {email}, etc.?

Acabo de notar las actualizaciones de información de usuario vacías en tiempo real cuando completo el formulario de cambio de información de usuario, pero no permanece allí después de actualizarlo o actualizarlo. Quiero que muestre los datos del usuario almacenados antes de la actualización antes de que el usuario realice un cambio.

 export function UserView() { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [birthday, setBirthday] = useState(''); const [email, setEmail] = useState(''); const [usernameErr, setUsernameErr] = useState(''); const [passwordErr, setPasswordErr] = useState(''); const [emailErr, setEmailErr] = useState(''); const token = localStorage.getItem('token'); const user = localStorage.getItem('user'); const validate = () => {... }; const getSiteUser = () => { axios .get(`https://...`, { headers: { Authorization: `Bearer ${token}` } }) .then((response) => { setUsername(response.data.Username); setUser(response.data) setEmail(response.data.Email); setBirthday(response.data.Birthday); console.log(response); }) .catch(function (error) { console.log(error) }); } useEffect(() => { getUser() }, []) return ( <Fragment> <h4> Your profile: </h4> <Card text='dark' className="user-form"> <Card.Body> <Card.Text>Username: {username}</Card.Text> <Card.Text>Email: {email}</Card.Text> <Card.Text>Birthday: {birthday}</Card.Text> <Card.Text>Password: {password}</Card.Text> </Card.Body> </Card> <h4> Edit your profile: </h4> <Form className="profile-form"> <Form.Group className="mb-3" controlId="username"> <Form.Label>Username</Form.Label> <Form.Control type="text" onChange={(e) => setUsername(e.target.value)} value={username} /> </Form.Group> </Form> </Fragment> ) }
about 4 years ago · Santiago Gelvez
1 Respuestas
Responde la pregunta

0

import { useState, Fragment, useEffect } from "react"; import Card from "react-bootstrap/Card"; import Form from "react-bootstrap/Form"; const axios = require("axios"); export default function App() { const [userDetails, setUserDetails] = useState( JSON.parse(localStorage.getItem("user")) || { username: "", password: "", birthday: "", email: "" } ); const token = localStorage.getItem("token"); function getSiteUser() { axios .get(`https://...`, { headers: { Authorization: `Bearer ${token}` } }) .then((response) => { setUserDetails({ username: response.data.Username, birthday: response.data.Birthday, email: response.data.Email }); }) .catch(function (error) { console.log(error); }); } function handleUsernameChange({ target }) { const newUserDetails = { ...userDetails }; newUserDetails.username = target.value; setUserDetails(newUserDetails); } useEffect(() => { getSiteUser(); }, []); useEffect(() => { localStorage.setItem("user", JSON.stringify(userDetails)); }, [userDetails]); return ( <Fragment> <h4> Your profile: </h4> <Card text="dark" className="user-form"> <Card.Body> <Card.Text>Username: {userDetails.username}</Card.Text> <Card.Text>Email: {userDetails.email}</Card.Text> <Card.Text>Birthday: {userDetails.birthday}</Card.Text> <Card.Text>Password: {userDetails.password}</Card.Text> </Card.Body> </Card> <h4> Edit your profile: </h4> <Form className="profile-form"> <Form.Group className="mb-3" controlId="username"> <Form.Label>Username</Form.Label> <Form.Control type="text" onChange={handleUsernameChange} value={userDetails.username} /> </Form.Group> </Form> </Fragment> ); }

Supongo que esto es lo que querías hacer, el error que tienes llamando a la API no podemos resolverlo nosotros sin más detalles.

about 4 years ago · Santiago Gelvez Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda