ReactJs |设置状态改变时按钮的可见性
ReactJs |设置状态改变时按钮的可见性
提问于 2021-07-13 12:34:39
我在react应用程序中使用了material 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上试过，但效果不好。
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-07-13 12:41:48
UseEffect只运行一次。为了让它在状态改变时再次运行，您需要在useEffect的依赖项数组中添加依赖项。
试试这个：
useEffect(() => {
console.log(state.loginType)
if(state.loginType=="google")
{
setVisibility(false)
}
}, [state.loginType])按钮组件为(通过条件呈现)：
{visibilitySetting &&<Button color="primary" variant="contained">
Group
</Button>}这应该可以解决问题。
Stack Overflow用户
发布于 2021-07-13 12:40:01
您仅将true和false设置为display属性。你也应该检查一下条件
<Button ... style={{display: visibilitySetting ? 'block' : 'none'}}>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68356538
复制相关文章
相似问题
腾讯云开发者
