React 状态更新只更新一个元素答案

【问题标题】：React state update only updates one elementReact 状态更新只更新一个元素
【发布时间】：2021-02-06 19:30:42
【问题描述】：

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

【问题讨论】：

标签： javascript node.js reactjs jsx react-context

【解决方案1】：

试试下面的方法，

{
     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'}));

【讨论】：

这成功了！谢谢。任何解释为什么使用 state => state.rank 不起作用？
{...state, rank:'user'} - 这将返回一个具有更新值的新对象，以便模板以新状态刷新。