不知道是什么原因导致了这个问题，当我使用useState更改状态时，其调用的元素会更新，而另一个不会（如下所示）。当我刷新页面时，显示正确的页面
<>
{
user.rank != "user" && user.username != username && userInfo.rank == "user" ? <div className="profile-btn" onClick={async () => {
let res = await PromoteToMod(username)
if(res.status == 'success')
setUserInfo(state => state.rank = 'mod')
}}>
<p>PROMOTE TO MOD</p>
</div>: <></>
}
{
user.rank != "user" && user.username != username && userInfo.rank == "mod" ? <div className="profile-btn" onClick={async () => {
let res = await DemoteToUser(username)
if(res.status == 'success')
setUserInfo(state => state.rank = 'user')
}}>
<p>DEMOTE TO USER</p>
</div>: < > < />
}
</>
这是react钩子的return（）。该挂钩仅包含一种状态[userInfo，setUserInfo]。从服务器检索到userInfo，这就是刷新后显示正确部分的原因。但是我想在从服务器收到响应后更新两个按钮（PROMOTE / DEMOTE），因此调用了setUserInfo。
试试下面的方法，
{
user.rank != "user" && user.username != username && userInfo.rank == "user" ?
<div className="profile-btn" onClick={async () => {
let res = await PromoteToMod(username)
if(res.status == 'success')
setUserInfo(state => ({...state, rank:'mod'}));
}}>
<p>PROMOTE TO MOD</p>
</div>: <></>
}
类似地 rank: 'user'
setUserInfo(state => ({...state, rank:'user'}));
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句