在 React Native 和 Firebase 中使用用户角色处理异步状态

在我最近的项目中，我遇到了一个有趣的挑战，我相信很多人都遇到过——根据 react native 应用程序中的用户角色获取数据。

我已将用户角色（常规、管理员）添加到我的应用程序中，作为管理员，我需要获取系统中的所有作业。

执行此操作的逻辑很简单 - 检查登录用户的角色并相应地获取数据。但我没想到的是 react 的异步行为会如何影响我的逻辑。

这是我正在使用的初始代码片段：

  const [loggedinuser, setloggedinuser] = 
usestate<partial<user> | null>(null);

const fetchjobs = async () => {
    try {
      let firebaseservice = await new firebaseservice();
      let jobslist: job[] = [];

      if (loggedinuser?.role == userroles.admin)
         jobslist = await firebaseservice.listalljobs();
      else 
         jobslist = await firebaseservice.listsingleuserjob();

      setjobs(jobslist);
      setfilterjobs(jobslist);
    } catch (error) {
      console.error('error fetching jobs:', error);
    } finally {
      setrefreshing(false);
      setisloading(false);
    }
  };

useeffect(() => {
    const fetchuser = async () => {
      try {
        let user = await returnloggeduser();
        setloggedinuser(user);
      } catch (error) {
        console.error('failed to fetch user', error);
      }
    };

    fetchuser();
  }, []);

  usefocuseffect(
    usecallback(() => {
      if (!hasrun) {
        fetchjobs();
        sethasrun(true);
      }, []
  );

usefocuseffect 在屏幕获得焦点时运行。

理论上来说，这是有道理的。但我不确定的是 loggedinuser 在我尝试获取作业之前始终会被定义。由于 useeffect 和 usefocuseffect 异步运行，因此无法保证 loggedinuser 会在 fetchjobs() 运行

Cutout.Pro

AI驱动的视觉设计平台

下载

这就是 react 的异步行为的体现。

我需要确保在继续作业获取逻辑之前已设置 loggedinuser。

通过添加对 loggedinuser 的检查，我确保 fetchjobs 仅在用户信息可用时运行：

useFocusEffect(
    useCallback(() => {
      if (loggedInUser && !hasRun) {
        fetchJobs();
        setHasRun(true);
      }, [loggedInUser]
  );

继续建设！