时间戳

首页 > 解决方案 > 误解使用 useState 反应钩子 - 不能正常工作

reactjs - 误解使用 useState 反应钩子 - 不能正常工作

问题描述

我正在尝试根据用户角色权限实现私有路由。这是我的代码：

App.js或routes.js：

<PrivateRoutes path="/equipments" role="hasEquipments" component={(props) => <EquipmentsList {...props} />} />
<PrivateRoutes path="/users/options" role="hasUsers" component={(props) => <UsersOptions {...props} />} />

PrivateRoutes 组件：

const PrivateRoutes = ({ role, ...rest }) => {
  const [permissions, setPermissions] = useState(false);
  const user = JSON.parse(localStorage.getItem('@TEST:userInfo'));

  useEffect(() => {
    async function loadRoles() {
      try {
        if (user !== undefined) {
          const response = await api.get(`/users/role/${user.nickname}`);
          const userPermissions = response.data.permissions;

          if (role === undefined) {
            setPermissions(false);
          }

          if (role === 'hasEquipments') {
            if (userPermissions.hasEquipments.state) {
              setPermissions(true);
            }
          }

          if (role === 'hasUsers') {
            if (userPermissions.hasUsers.state) {
              setPermissions(true);
            }
          }
        }
      } catch (err) {
        console.log(err);
      }
    }

    loadRoles();
  }, [role]);

  const userLogged = () => {
    if (localStorage.getItem('@TEST:tokenJwt')) {
      return true;
    } else {
      return false;
    }
  }

  if (!userLogged()) {
    return <Redirect to="/" />;
  }

  if (!role && userLogged()) {
    return <Route {...rest} />;
  }
    
  return (
    <>
      {console.log(permissions)}
      {permissions ? <Route {...rest} /> : <Redirect to="/" />}
    </>
  )
};

export default PrivateRoutes;

response.data例如来自/users/role/${user.nickname}帖子：

{
  hasEquipments: {
    actions: {post: true, put: true, delete:: false}
    state: true,
  },   
  hasUsers: {
    actions: {post: false, put: false, delete:: false}
    state: false,
  }
}

按照response.data例如，我将可以访问/equipments路径。无论如何，我总是重定向到'/'，权限挂钩总是false。最后return，如果我只打印{console.log(permissions)}评论{permissions ? <Route {...rest} /> : <Redirect to="/" />}行，那么权限挂钩就是true。我想我在这里误解了一些生命周期概念。

任何提示如何实现这一目标？

标签： reactjsreact-hooksuse-statereact-componentreact-lifecycle

解决方案

甚至在调用 api 之前就进行了重定向。useEffect在组件渲染后调用。一个解决方案是添加一个中间值，null或者你让它未定义，这只是一种知道对 api 的调用是否已经进行的方法。

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

// ...

if (permissions === null) return null

// ...

{permissions ? <Route {...rest} /> : <Redirect to="/" />}

推荐阅读