Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

164
Visualizações
¿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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda