如何在JSX中显示存储的用户数据?

Question

我成功创建了一个表单来更改用户数据，但不知何故，我无法使用下面的代码显示已经保存的用户数据。如何显示存储的用户数据以创建漂亮的配置文件视图?为什么下面不工作，即使我使用相同的方法来编辑针对对象{email}等形式?

当我填写更改用户信息表单时，我刚刚注意到空用户信息实时更新，但在我更新或刷新后，它不会留在那里。我想让它显示更新前存储的用户数据在用户进行更改之前

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>
)
}

Answer 1

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>
);
}

我假设这是你想要做的，如果没有进一步的细节，你调用API的错误无法由我们解决。