更新用户配置文件信息页面-React useState

Question

我正在尝试制作一个更新用户页面，其中包含要在输入字段中呈现的以前的信息。Console.log返回正确的值，但它不会在useState中显示为初始值。

获取以前的用户简历

function EditProfile(props) {
const user = useSelector(state => state.user);

const [profile, setProfile] = useState([])
const userId = props.match.params.userId
const userVariable = {
userId: userId
}
useEffect(() => {
axios.post('/api/users/getProfile', userVariable)
.then(response => {
if (response.data.success) {
console.log(response.data)
setProfile(response.data.user)
} else {
alert('Failed to get user info')
}
})

}, [])
console.log(profile.bio);

以下是我当前用于显示输入字段的内容。(为简洁起见进行了编辑(

const [bio, setBio] = useState("");
const handleChangeBio = (event) => {
console.log(event.currentTarget.value);
setBio(event.currentTarget.value);
}
return (
<label>Bio</label>
<TextArea
id="bio"
onChange={handleChangeBio}
value={bio}
/>
)

以前尝试过这样做，但对象没有显示为useState初始值

const [bio, setBio] = useState(User.bio);

后端-我知道$set会覆盖所有信息，所以我试图在输入字段中呈现以前的信息，这样它就不会被空白值覆盖。

router.post('/edit', auth, (req, res)=> {
console.log(req.body.education)
User.updateMany(
{ _id: req.user._id },
[ {$set: { bio: req.body.bio}}, 
{$set: { industry: req.body.industry}},
{$set: { jobTitle: req.body.jobTitle}},
], 
(err)=>{
if (err) return res.json({success: false, err});
return res.status(200).send({
success: true
});
});
});

Answer 1

创建一些自定义组件并将User作为道具，您将看到您获得了数据。

const [User, setUser] = useState([])

最好改为

const [user, setUser] = useState('')

您可能会遇到一些问题，因为组件以大写字母开头数组作为默认值可能在第一次渲染后出错

您可以将其移动到单独的组件：

<Example user={user} />
const Example = (props) => {
const [bio, setBio] = useState(props.user.bio);
const handleChangeBio = (event) => {
console.log(event.currentTarget.value);
setBio(event.currentTarget.value);
}
return (
<label>Bio</label>
<TextArea
id="bio"
onChange={handleChangeBio}
value={bio}
/>
)
}