React-将api调用结果返回到原始函数

我正在我的应用程序中创建一个用户管理页面,该页面将合并用户池组的用户列表,然后进行呈现。我正在使用AWS Cognito托管用户和组。

我试图遵循最佳实践原则,即代码只编写一次,所以我为AWS api调用创建了一个单独的文件。

我无法将响应返回到原始功能。

这是容器功能文件:

import ListUsers from "../../../API/cognito/ListUsers";
import { useState, useEffect } from "react";

export default function ManageUsers() {
  let groups = ["admin", "ntig-exec", "tlo-officers", "tlo-users"];

  const [users, setUsers] = useState();
  //const apiUsers = useRef();

  useEffect(() => {
    async function getUsers() {
      let apiUsers = await ListUsers();
      console.log("apiUsers: ", apiUsers);
      setUsers(apiUsers);
    }
    getUsers();
  }, []);

  return (
      <h2>demo page</h2>
  );
}

这是api调用文件

import AWS from "aws-sdk";
import { useState, useEffect } from "react";
import awsmobile from "../../aws-exports";
import { Auth } from "aws-amplify";
import { onError } from "../../libs/userFeedback/errorLib";
import { useAuthContext } from "../../libs/context/authenticatedLib";

export default async function ListUsers() {
  let idToken = "";
  await Auth.currentAuthenticatedUser().then((user) => {
    idToken = user.signInUserSession.idToken.getJwtToken();
  });

  AWS.config.region = awsmobile.aws_cognito_region;
  AWS.config.credentials = new AWS.CognitoIdentityCredentials({
    IdentityPoolId: awsmobile.aws_cognito_identity_pool_id,
    RoleArn: myarn,
    Logins: { mylogin: idToken }
  });

  let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
  let params = {
    UserPoolId: awsmobile.aws_user_pools_id
  };

  cognitoidentityserviceprovider.listUsers(params, function (err, result) {
    if (err) {
      console.log(err);
      onError(err);
      return;
    }
    if (result) {
      console.log("result", result);
      return result;
    }
  });
}

这是控制台日志:

apiUsers:  undefined
result Object { Users: (6) […] }

我尝试过几种方式重新编写代码,包括尝试使api成为Promise,而不是回调,但是我没有使它正确的经验。

我假设我需要在容器函数中进行更改以等待api调用完成。

如何获取结果对象以返回给apiUsers变量?

短信

将代码包装在api调用文件的ListUsers()函数中的promise中,并基本上传递要返回的值以解决回调,如果遇到一些错误,则可以在拒绝回调中传递该错误。
以下是您的更新代码。

import awsmobile from "../../aws-exports";
import { Auth } from "aws-amplify";
import { onError } from "../../libs/userFeedback/errorLib";
import { useAuthContext } from "../../libs/context/authenticatedLib";

export default async function ListUsers() {
    return new Promise((resolve, reject) => {
        let idToken = "";
        await Auth.currentAuthenticatedUser().then((user) => {
            idToken = user.signInUserSession.idToken.getJwtToken();
        });

        AWS.config.region = awsmobile.aws_cognito_region;
        AWS.config.credentials = new AWS.CognitoIdentityCredentials({
            IdentityPoolId: awsmobile.aws_cognito_identity_pool_id,
            RoleArn: myarn,
            Logins: { mylogin: idToken }
        });

        let cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
        let params = {
            UserPoolId: awsmobile.aws_user_pools_id
        };

        cognitoidentityserviceprovider.listUsers(params, function (err, result) {
            if (err) {
                console.log(err);
                //onError(err);
                reject(err);
                return;
            }
            if (result) {
                console.log("result", result);
                // return result;
                resolve(result);
            }
        });
    });
}

并且由于ListUsers()返回了Promise,因此您已经正确地使用了await在容器函数文件中标记为async的函数中调用它。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类常见问题

React-Redux->为什么我的reducer无法将更改后的状态返回到索引页面?

来自分类Dev

将结果返回到Webview操作

来自分类Dev

在匿名函数中调用react函数

来自分类Dev

如何将文本输入返回到React组件

来自分类Dev

React Native Fetch API不返回我的调用

来自分类Dev

如何在React函数组件中调用API?

来自分类Dev

React / Axios API调用返回承诺

来自分类Dev

返回React Native应用时调用函数

来自分类Dev

React:将函数的返回结果分散在一行中

来自分类Dev

如何从try块React中成功的API调用返回对象?

来自分类Dev

在React render中调用函数

来自分类Dev

函数在React中被多次调用

来自分类Dev

React函数什么都不返回

来自分类Dev

使用React Hooks的API调用

来自分类Dev

从API返回新结果时调用函数

来自分类Dev

Axios将index.html内容返回到前端(React.js)

来自分类Dev

如何在React中向API调用函数添加参数

来自分类Dev

将类转换为函数React Error无效的钩子调用

来自分类Dev

无需单击按钮,函数方法将调用react

来自分类Dev

使用REACT调用NodeJS API

来自分类Dev

php循环功能并将结果返回到原始调用

来自分类Dev

调用模态窗口并返回到原始窗口

来自分类Dev

React Native将一个元素返回到控制台日志

来自分类Dev

React API调用失败

来自分类Dev

React Native FlatList - 在返回组件的渲染方法中调用函数

来自分类Dev

如何使用 React-Draggable 将图像返回到其原始位置?

来自分类Dev

从onchange方法调用后,React函数不返回组件

来自分类Dev

React - 从 render() 调用异步函数

来自分类Dev

React - 从 API 返回数据

Related 相关文章

热门标签

归档