React TypeScript条件渲染Bug求助：点击新消息后无法切换回会话

我有一个「新消息」按钮和若干会话组件，需求是点击会话时右侧显示对应消息框，点击新消息按钮时显示新建消息框。

初始实现采用string类型的newMessage状态配合立即执行函数做条件渲染，首次点击会话和新消息都正常，但点击新消息后无法再切换显示会话消息框。将newMessage改为boolean类型，并在会话点击处理器中重置newMessage为false后，问题解决。

初始代码（存在问题） #

useState与事件处理器

const [newMessage, setNewMessage] = useState<string>('');
const [conversations, setConversationsState] = useState<string>('');

const newMessageHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
    const button: HTMLButtonElement = event.currentTarget;
    setNewMessage(button.id);
};
const conversationsHandler = (event: React.MouseEvent<HTMLDivElement>) => {
    event.preventDefault();
    const div: HTMLDivElement = event.currentTarget;
    setConversationsState(div.id);
};

条件渲染JSX

{
     (() => {
      if (newMessage)
      return <NewMessageComponent />

      else if (conversations)
         return (
          <>
            {tempData.map(
              (tempdata) =>
                conversations === tempdata.id && (
                  <MessageBox
                    name={tempdata.name}
                  />
                ),
            )}
          </>
        )
      else 
         return <span>No Conversations Selected</span>
  })()
}

修正后代码（问题解决） #

useState与事件处理器

const [newMessage, setNewMessage] = useState<boolean>(false);
const [conversations, setConversationsState] = useState<string>('');

const newMessageHandler = () => {
    setNewMessage(true);
};
const conversationsHandler = (event: React.MouseEvent<HTMLDivElement>) => {
    event.preventDefault();
    const div: HTMLDivElement = event.currentTarget;
    setConversationsState(div.id);
    setNewMessage(false);
};

条件渲染JSX

(() => {
          if (newMessage)
          return <NewMessageComponent />

          else 
             return (conversations?
              <>
                {tempData.map(
                  (tempdata) =>
                    conversations === tempdata.id && (
                      <MessageBox
                        name={tempdata.name}
                      />
                    ),
                )}
              </> :
              <span>No conversations selected</span>
            )
      })()

问题原因：初始实现中，点击新消息按钮后newMessage被设置为非空字符串，后续点击会话时仅更新了conversations状态，但newMessage仍保持非空值，导致条件渲染始终优先匹配newMessage分支，无法切换到会话消息框。改为boolean类型后，点击会话时主动重置newMessage为false，确保状态切换逻辑正确。

内容的提问来源于stack exchange，提问作者mysteriouscoder