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

【问题标题】：Misunderstand using useState react hook - don't work properly误解使用 useState 反应钩子 - 不能正常工作
【发布时间】：2021-06-20 05:23:42
【问题描述】：

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

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

任何提示如何实现这一点？

【问题讨论】：

标签： reactjs react-hooks use-state react-component react-lifecycle

【解决方案1】：

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

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

// ...

if (permissions === null) return null

// ...

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

【讨论】：

使用中间值，为 null，并在每个 if 中添加一个 else 子句以将权限更新为 false，它起作用了，真的感谢@jperl！