更新用户配置文件信息页面- React useState
更新用户配置文件信息页面- React useState
提问于 2020-08-08 06:24:59
我正在尝试创建一个更新用户页面，其中包含要在输入字段中呈现的以前的信息。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
});
});
});回答 1
Stack Overflow用户
发布于 2020-08-08 07:54:13
创建一些自定义组件，并将用户作为道具，您将看到您获得了数据。
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}
/>
)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63309858
复制相关文章
相似问题
腾讯云开发者
