更新用户个人资料信息页面 - 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}
    />
    )
}