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

Stack Overflow用户

提问于 2020-08-07 22:24:59

回答 1查看 2.5K关注 0票数 0

我正在尝试创建一个更新用户页面，其中包含要在输入字段中呈现的以前的信息。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
        });
    });
});

reactjs

express

react-hooks

state

mern

数字工厂场景解决方案

帮助企业实现数字化、智能化，解决企业工厂内设备数据采集、设备指标分析、企业信息系统间数据孤岛打通、数据应用困难的问题

回答 1

Stack Overflow用户

发布于 2020-08-07 23: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}
    />
    )
}