Javascript 反应状态更新仅更新一个元素

不确定是什么导致了这个问题，当我使用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>: < > < />
} 
</>

{
user.rank！=“user”&&user.username！=用户名&&userInfo.rank==“user”{
let res=wait PromoteToMod（用户名）
如果（res.status='success'）
setUserInfo（state=>state.rank='mod'）
}}>
升级到国防部

: 
}
{
user.rank！=“user”&&user.username！=用户名&&userInfo.rank==“mod”{
let res=等待降级用户（用户名）
如果（res.status='success'）
setUserInfo（state=>state.rank='user'）
}}>
降级为用户

: < > < />
} 

---

这是react钩子的返回（）。钩子只包含一个状态[userInfo，setUserInfo]。用户信息是从服务器检索的，这就是刷新时显示正确部分的原因。但是我想在收到服务器的响应后更新这两个按钮（升级/降级），从而调用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>: <></>

}

---

这成功了！谢谢关于为什么使用state=>state.rank无效的任何解释？

{…state，rank:'user'}

-这将返回一个具有更新值的新对象，以便模板使用新状态刷新。

  setUserInfo(state => ({...state, rank:'user'}));