React动态权限控制失效，组件没按角色切换显示

轩辕栾同提问于 2026-02-10 16:26:30 阅读 30

安全

我在做用户角色切换时动态控制按钮权限，根据用户权限数组渲染组件。但切换角色后按钮没变化，哪里出问题了？

比如当前用useState存用户权限，用includes判断是否显示：


function AdminButton({ permissions }) {
  return (
    {permissions.includes('admin') && (
      <button>删除数据</button>
    )}
  )
}

在父组件用useEffect监听权限变化：


const [userRole, setRole] = useState('guest');

useEffect(() => {
  if (userRole === 'admin') {
    // 更新权限数组
  }
}, [userRole]);

但实际测试时，切换userRole为admin后按钮仍然不显示。控制台没报错，权限数组确实在变化，是什么原因导致组件没重新渲染？

动态权限权限控制

我来解答赞 2 收藏

反馈

1 条解答

小俊豪 Lv1

应该是权限数组没触发组件更新。你得把权限数组也用useState管理，不然useEffect改了普通变量不会触发渲染。

改成这样：

const [userRole, setRole] = useState('guest');

const [permissions, setPermissions] = useState([]);



useEffect(() => {

  if (userRole === 'admin') {

    setPermissions(['admin', 'edit']);

  } else {

    setPermissions(['guest']);

  }

}, [userRole]);



return ;

2026-02-10 16:33