React按钮未渲染问题求助：状态设为true仍不显示

核心问题 #

你的代码存在两个关键问题导致按钮无法正常显示：

1. useEffect依赖项不完整：当前effect的依赖数组仅包含props.statePassDown，但逻辑中用到了props.changeVisibiltyEvent。当props.changeVisibiltyEvent变为2但props.statePassDown未变化时，effect不会触发，setIsThirdButtonVisible(true)也就不会执行。
2. 状态同步冗余：用本地状态isThirdButtonVisible同步props.changeVisibiltyEvent的值，容易导致父子组件状态不同步，增加维护成本。

解决方案 #

方案1：修复useEffect依赖项（保留本地状态） #

将props.changeVisibiltyEvent添加到effect的依赖数组中，确保当该props变化时effect能触发，同时补充状态重置逻辑：

React.useEffect(()=>{
  (async () => {
      var x = await GetMessages(props.statePassDown)

      // 根据props值更新按钮显示状态
      if(props.changeVisibiltyEvent === 2) {
        setIsThirdButtonVisible(true)
       } else {
        setIsThirdButtonVisible(false)
       }

      if(props.statePassDown === 0)
      return  

      setChatRooms(x)
      scrollToBottom()
  })()
},[props.statePassDown, props.changeVisibiltyEvent])  // 添加props.changeVisibiltyEvent到依赖

方案2：直接使用props控制显示（更简洁，推荐） #

完全移除本地状态，直接在render阶段通过props.changeVisibiltyEvent的值控制按钮显示，避免状态同步问题：

<td style={{ display: props.changeVisibiltyEvent === 2 ? 'inline-block' : 'none' }}>
  <Button className='ButtonImportant' variant="contained" onClick={() => changeCase('openCase')}>wiedereröffnen</Button>
</td>

此方案可以删除isThirdButtonVisible状态变量及相关的effect逻辑，代码更简洁且不易出错。

额外优化点 #

• 避免在组件内部使用var声明变量（如timerStarted、chatRoomID），这类变量会在组件每次渲染时重置或产生闭包问题，建议用useRef保存：

const timerStarted = React.useRef(false);
const chatRoomID = React.useRef(null);

• 确认changeCase函数已正确定义（你提供的代码中未包含该函数的实现，需保证其存在且能正常工作）。

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