异步函数react-native的问题

时间:2019-12-01 18:17:02

标签: multithreading react-native redux promise

在渲染模板之前,我需要获取一些数据,并且尝试了2种方法,但是两者均失败了。

这是第一个进行同步交易的

if (loginData) {
    loginGet(userData!.cpf, loginData.access_token)
      .then((data: UserAzureInterface) => {
        console.log(JSON.stringify(data));
        dispatchUserAzureSuccess(data, dispatch);
      })
      .catch(_error => {});
  } else {
    navigation.navigate('Login');
  }

return (
    <>
      <ProfileIndexTemplate onSubmit={onSubmit} userData={userData} />
    </>
  );

这是异步事务:

const getLoginAzure = async () => {
    if (loginData) {
      const loginAzureData = await loginGet(
        userData!.cpf,
        loginData.access_token,
      );
      console.log(JSON.stringify(loginAzureData));
      dispatchUserAzureSuccess(loginAzureData, dispatch);
    }
  };

  getLoginAzure();

return (
    <>
      <ProfileIndexTemplate onSubmit={onSubmit} userData={userData} />
    </>
  );

从profileIndexTemplate我试图获取我的UserAzureInterface,但是我得到了未定义的数据,因为我在屏幕上的loginGet还没有完成。

const loginAzure = useSelector(({ userAzure }: AppState) => userAzure.data);
  console.log(`meu login azure: ${JSON.stringify(loginAzure)}`);

我能看到错误,但是我不知道如何解决。有人可以帮助我吗?

1 个答案:

答案 0 :(得分:1)

我明白了!为了解决这个问题,这就是我所做的:

 useEffect(() => {
    console.log(`gettingAzure: ${userData!.cpf}`);

    if (!loginData) {
      navigation.navigate('Login');
    } else {
      loginGet(userData!.cpf, loginData!.access_token)
        .then((data: UserAzureInterface) => {
          console.log(JSON.stringify(data));
          dispatchUserAzureSuccess(data, dispatch);
        })
        .catch(_error => {});
    }
  }, []);

  if (azurePending || !azureData) {
    return <LoadingModal />;
  }

  return (
    <ProfileIndexTemplate
      onSubmit={onSubmit}
      userData={userData}
      loginAzure={azureData}
    />
  );