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

更新用户个人资料信息页面-React useState

1 个答案: