反应Js |在状态更改时设置按钮可见性答案

【问题标题】：ReactJs | Set Button Visbility On State Change反应Js |在状态更改时设置按钮可见性
【发布时间】：2021-09-22 03:52:32
【问题描述】：

我在我的反应应用程序中使用材料 UI 按钮。当我更改状态时，按钮不会消失。下面是我的代码-

function MainPage() {
    const state = useSelector(state => state.loginDetails.state)

    const [visibilitySetting, setVisibility] = useState(true)

    useEffect(() => {
      console.log(state.loginType)
      if(state.loginType=="google")
      {
          setVisibility(false)
      }
    }, [])   
    

    return (
      <div style={{ height: 400, width: '100%' }}>
        <Button color="primary" variant="contained" style={{display:visibilitySetting}}   >
          Group
        </Button>
)

我已经从代码中确定state.loginType 是google。

我也试过 display=none ;但效果没有发生。

【问题讨论】：

标签： javascript css reactjs react-hooks material-ui

【解决方案1】：

UseEffect 只运行一次。要让它在状态改变时再次运行，你需要在 useEffect 的依赖数组中添加一个依赖。

试试这个：

 useEffect(() => {
      console.log(state.loginType)
      if(state.loginType=="google")
      {
          setVisibility(false)
      }
    }, [state.loginType])

和按钮组件一样（通过条件渲染）：

{visibilitySetting &&<Button color="primary" variant="contained">
          Group
        </Button>}

这应该可以解决问题。

【讨论】：

这是完美的，在 useeffect 中不需要 [state.loginType]，因为 logintype 在页面加载时只设置一次。谢谢！

【解决方案2】：

您只是将true 和false 设置为display 属性。你也应该检查条件

<Button ... style={{display: visibilitySetting ? 'block' : 'none'}}>

【讨论】：

是的，这也应该有效，但是正如我在问题陈述的最后一行中提到的那样，不知何故这也不起作用..但是感谢您的回答，这也可能对某人有所帮助。