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

Question

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

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} post:

{
  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。我想我在这里误解了一些生命周期概念。

有什么技巧可以实现吗？

Answer 1

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

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

// ...

if (permissions === null) return null

// ...

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

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

Misunderstand using useState react hook - don't work properly

reactjs

react-hooks

use-state

react-component

react-lifecycle